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

Question

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

而不是像这样继续 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>

Answer 1

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

sm 仅指定宽度至少为 568 像素的屏幕尺寸的行为。低于你的问题。

要解决此问题，请分别添加 pure-u-1-1 class - 您可以说它定义了您的标准行为。仅此一项是行不通的，因为您使用另一种样式sheet 来规范化 您的CSS。将您的 规范化 CSS 文件放在代码中其他样式 sheet 的前面，否则它会覆盖您的一些其他 CSS 规则（关键字级联风格sheet)。始终先提及您的 规范化 CSS 文件！

此外，在这种情况下，pure-u-md-1-1 class 似乎已过时，因为它没有指定除 pure-u-sm-1-1 之外的其他行为。后者已经为至少 568px 的所有屏幕尺寸定义了相同的行为。

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

Pure css grid problem when changing the chrome screen size to mobile size

css

css-grid

pure-css