我尝试使用纯 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>
最佳答案
您的网格系统和媒体查询有问题。
sm
仅指定宽度至少为 568 像素的屏幕尺寸的行为。低于您的问题。
要解决此问题,请分别添加 pure-u-1-1
类 - 您可以说它定义了您的标准行为。但是,仅此一项是行不通的,因为您使用了另一个样式表来规范化您的 CSS。将您的规范化 CSS 文件放在代码中其他样式表的前面,否则它会覆盖您的一些其他 CSS 规则(关键字级联 样式表)。始终首先提及您的规范化 CSS 文件!
同样在这种情况下,pure-u-md-1-1
类似乎已过时,因为它没有指定 pure-u-sm-1-1
之外的其他行为>。后者已经为至少 568 像素的所有屏幕尺寸定义了相同的行为。
关于css - 将 chrome 屏幕尺寸更改为移动尺寸时的纯 css 网格问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58572314/