将Chrome屏幕尺寸更改为移动尺寸时的纯CSS网格问题

jboo 发表于 Dev

boo

我尝试使用纯css网格系统，如文档中所述，但是我无法使其在台式机分辨率和移动设备（如Pixel 2分辨率）上运行。

而不是像这样去两行：

我遇到了字母间距问题，并且div处于同一行：

    <div class="pure-g">
            <div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-9-24">
                <div class="l-box">
                  <span class="fa-stack">
                    <i class="fa fa-circle fa-stack-1And5x"></i>
                    <strong class="fa-stack-1x label-white">4</strong>
                  </span>
                    <label>Test:</label>

                </div>
            </div>
            <div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-15-24">
                <div class="l-box">
                    <input class="pure-radio" id="montant" name="montant" type="text" value="">

                </div>
            </div>
          </div>

L483

您的网格系统和媒体查询存在问题。

sm仅针对宽度至少为568px的屏幕尺寸指定行为。低于该值会发生您的问题。

为了解决这个问题，pure-u-1-1分别添加类-您可以说它定义了您的标准行为。但是，仅此一项是行不通的，因为您使用了另一个样式表来标准化CSS。将规范化的CSS文件放在代码中其他样式表的前面，否则它将覆盖您的其他一些CSS规则（关键字级联样式表）。总是首先提到您的规范化CSS文件！