将chrome屏幕大小更改为手机大小时出现纯css网格问题
我尝试使用纯css网格系统,如中所述,但我无法使其在桌面分辨率和移动像素2分辨率上工作 而不是像这样说两行: 我遇到了字母间距问题,div在同一行:将chrome屏幕大小更改为手机大小时出现纯css网格问题,css,css-grid,pure-css,Css,Css Grid,Pure Css,我尝试使用纯css网格系统,如中所述,但我无法使其在桌面分辨率和移动像素2分辨率上工作 而不是像这样说两行: 我遇到了字母间距问题,div在同一行: 4 测试: 您的网格系统和媒体查询有问题 sm仅指定宽度至少为568px的屏幕大小的行为。低于此值,您的问题就会出现 要解决这个问题,请分别添加pure-u-1-1类,您可以说它定义了您的标准行为。但是,这一点是行不通的,因为您使用了另一个样式表来规范CSS。将规范化CSS文件放在代码中其他样式表的前面,否则它会覆盖一些其他CSS规则(关键
4
测试:
您的网格系统和媒体查询有问题
sm
仅指定宽度至少为568px的屏幕大小的行为。低于此值,您的问题就会出现
要解决这个问题,请分别添加pure-u-1-1
类,您可以说它定义了您的标准行为。但是,这一点是行不通的,因为您使用了另一个样式表来规范CSS。将规范化CSS文件放在代码中其他样式表的前面,否则它会覆盖一些其他CSS规则(关键字层叠样式表)。总是先提到你的标准化CSS文件
同样在这种情况下,pure-u-md-1-1
类似乎过时了,因为它没有指定除pure-u-sm-1-1
之外的其他行为。后者已经为至少568px的所有屏幕大小定义了相同的行为
<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>