每次我开始编写新的响应式页面时，我都会提出这个问题，所以我想问你们：“为页面添加响应性时破坏可读性是否正常？”
我想你可以通过一个例子更好地理解：我在 12 列网格系统中有 2 个大列，所以我设置了 2 个 div，类为 .grid-6 和 css .grid-6 {width:50%}。在平板电脑布局中，图形设计师放置了三列，因此我将这些列的宽度更改为 33%，但现在我有一个带有 grid-6 类的 div（表示宽度为 50%），实际列宽为 33%。
所以当我开始研究响应性时，感觉就像是“黑客”。我想为平板电脑和手机或其他设备添加不同的类 (<div class="grid-6 tablet-grid-4 phone-grid-3">)，但这感觉不对。
当您收到每个断点具有不同列数的图形设计时，就会出现问题。我的意思是，您不能更改 html 中的列数，amirite？
【问题讨论】：
考虑使用Cascade Framework。
Cascade 框架中的网格元素是
以下 HTML 元素之一：section、main、article、header、footer、aside 或 nav（这些元素用旧 IE 的 HTMLshiv 填充，以备不时之需）。
李>具有“col”类的 div 元素（可以在没有 polyfill 的旧 IE 中使用）。
要为网格元素添加宽度，请添加格式为“width-XofY”的类，其中 Y 可以是 2、3、4、5、6、7、8、9、10、12、16或 24，X 可以是任何低于 X 的值。
更具体地说，这里有一些可以在 Cascade 框架中使用的有效类的示例：'width-1of2'（宽度：50%）、'width-3of4'（宽度：25%）、'width-2of5'（ width : 40%), 'width-2of5' (width: 40%), 'width-2of7' (width:28.5714286%) 和 'width-13of16' (width:81.25%)
除了这些类之外，您还可以使用“width-fit”和“width-fill”类，它们分别适合内容并填充 100% 宽度的剩余部分。或者，您可以定义自己的类和 ID，然后为这些类添加自定义宽度，以“语义”的方式进行操作。
如果您的构建包含响应模块（推荐构建就是这种情况），则所有网格元素的宽度在移动设备上会自动重置为 100%。您可以使用“mobile-width-3of16”、“phone-width-3of7”或“tablet-width-2of4”等类来自定义不同宽度范围的布局以及“desktop-hidden”、“mobile-hidden”类, 'phone-hidden' 或 'tablet-hidden' 隐藏特定屏幕的内容。
但是，在某些情况下，这仍然可能导致类似 <div class='col width-1of4 tablet-1of3 phone-1of2'> </div> 的内容。在这些情况下，语义化是一种更好的方法。更具体地说，执行 <div class='col custom_class'> </div> 或 <section class='custom_class'> </section> 之类的操作，然后在自定义 CSS 中自己设置每个断点的宽度。
【讨论】：
我有点迷茫，但我相信您所说的移动浏览器正确吗？如果是这样，@media 是您的解决方案。
html,body{
min-height:100%;
}
.grid-6 {
width:33%;
min-height:100%;
margin:0px;
display:inline-block;
}
上面将创建一个与您解释的类似的柱状网格。我认为？哈哈 将这些转换为移动浏览器的一列很容易。将@media 视为条件。基本上我写了'if device width
@media only screen and (device-width:480px){
.grid-6{
width:100%;
display:block;
}
}
所有未在@media 条件中声明的其他样式都继承自上面的类。希望这有帮助
【讨论】：
首先，最好根据类的功能而不是其外观来命名类...例如，navigationContainer 比leftContainer 更好，因为navigationContainer 可以存在于页面上的任何位置。
就适应不同的布局、屏幕尺寸和方向等而言，您将需要使用media 属性（或@media 声明），它允许您将类定义仅应用于设备和屏幕满足一定的标准。这就是在函数之后命名类的好处。如果您以函数的形式命名一个类（如mainContentGrid，那么您可以在所有不同的媒体样式表中多次重新定义该类。因为原则上根据查看上下文只应用一张表，您的样式将始终适合查看上下文。这消除了您的多类问题并清理了您的代码。
如果您想要更准确的意见，请发布一些代码，我很乐意为您提供我的想法。
【讨论】：
所有浏览器大小的列数应保持一致；只有它们的宽度和填充应该改变。然而，在移动设备中将所有列重置为 100% 宽度是很常见的，否则它们应该只会缩小，而不是完全删除。我建议回到设计者那里或重新调整你的网格以得到一个所有响应都遵守的倍数。
【讨论】：
Flexbox 是您的解决方案，但还不是时候。
如果您不太关心语义，这是您使用tablet-grid-4 描述的完美解决方案。在其类名中使用大小定义的网格不是语义的。您也可以将其命名为desktop-main desktop-aside tablet-main tablet-aside 等。但我在实践中总是达不到自己的要求。平板电脑中的三个偶数列是什么名字？这不是主要的，也不是次要的。它们各占三分之一 :) 当整个容器都是它们的布局时，很难不说 html 中的布局。
问候
【讨论】：
试试Dead Simple Grid。而不是像
那样硬编码网格布局类<div class="grid-6 tablet-grid-4 phone-grid-3"></div>
你分配一个抽象类，比如
<div class="col left"></div>
<div class="col right"></div>
然后将宽度分配给这些类别以适应不同的屏幕尺寸
.left, .right { width: 100%; }
@media only screen and (min-width: 54em) {
.left, .right { width: 50%; }
}
默认情况下，此示例针对小屏幕（例如智能手机），left 和 right 填充其容器的整个宽度（可以是另一列，因为支持嵌套！）并在彼此下方显示两个元素。但是，当屏幕足够大时，这两列会并排显示。
Dead Simple Grid 非常简单（整个 css 代码为 250 字节！）但功能却出奇的强大。
【讨论】：