Question

每次我开始编写新的响应式页面时，我都会提出这个问题所以我想我会问你们：“在添加页面响应性时打破可读性是否正常？”

我认为你会更好地理解一个例子：我在12列网格系统中有2个大列，所以我在类.grid-6和css .grid-6 {width:50%}中设置2个div。在平板电脑布局中，图形设计师放置了三列，因此我将这些列的宽度更改为33％，但现在我有一个div类，其中grid-6类（建议宽度为50％），实际列宽为33％。 / p>

因此，当我开始处理响应时，它只是感觉像“黑客”..我虽然为平板电脑和手机或其他设备添加不同的类（<div class="grid-6 tablet-grid-4 phone-grid-3">），但这感觉不对。< / p>

当您收到每个断点具有不同列数的图形设计时，会出现问题。我的意思是，您无法更改html中的列数，amirite？

Answer 1

考虑使用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 Framework中使用的有效类的示例：'width-1of2'（宽度：50％），'width-3of4'（宽度：25％），'width-2of5'（宽度：40％），'width-2of5'（宽度：40％），'width-2of7'（宽度：28.5714286％）和'width-13of16'（宽度：81.25％）

除了这些类之外，您还可以使用分别适合内容的类'width-fit'和'width-fill'，并填充100％宽度的剩余部分。或者，您可以只定义自己的类和ID，并为这些类添加自定义宽度，以“语义”方式执行操作。

如果您的构建包含响应模块（建议构建的情况），则所有网格元素的宽度在移动设备上自动重置为100％。您可以使用“mobile-width-3of16”，“phone-width-3of7”或“tablet-width-2of4”等类来自定义不同宽度范围的布局以及“桌面隐藏”类，“移动隐藏”类，'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中自行设置每个断点的宽度。

Answer 2

我有点失落，但我相信你在谈论移动浏览器是否正确？如果是这样的话，@ media就是你的解决方案。

html,body{
    min-height:100%;
}
.grid-6 {
    width:33%;
    min-height:100%;
    margin:0px;
    display:inline-block;
}

上面将创建一个类似于您解释的列网格。我认为？大声笑将这些转换为移动浏览器的一列很容易。将@media视为一种条件。基本上我写的是“如果设备宽度<= 480px”，这相对于iPhone 4gs及以下屏幕。

@media only screen and (device-width:480px){
    .grid-6{
        width:100%;
        display:block;
    }
}

未在@media条件中声明的所有其他样式都继承自上面的类。希望这有帮助

Answer 3

首先，最好在其功能而不是其外观之后命名一个类...例如navigationContainer比leftContainer更好的名称，因为navigationContainer可以存在在页面的任何地方。

就适应不同的布局，屏幕尺寸和方向等而言，您需要使用media属性（或@media声明），这将允许您仅应用类定义符合某些标准的设备和屏幕。这就是在函数之后命名类的好处。如果你在一个函数之后命名一个类（比如mainContentGrid，那么你可以在所有不同的媒体样式表中重新定义类的次数。因为原则上根据查看上下文只会应用一个表，您的样式将始终适合查看上下文。这样可以消除您的多类问题并清理代码。

如果您想要更准确的意见，请发布一些代码，我很乐意向您提供我的想法。

Answer 4

列数应在所有浏览器大小中保持一致;只有它们的宽度和填充应该改变。然而，在移动设备中将所有列重置为100％宽度是很常见的，但是否则它们只应缩小，而不是完全丢弃。我建议回到设计师或重新调整你的网格，以获得所有响应所遵循的倍数。

Answer 5

Flexbox是您的解决方案，但现在还不是时候。

如果您对语义不太关心，那么使用tablet-grid-4描述它是一个完美的解决方案。使用类名称中的大小定义的网格不是语义的。您也可以将其命名为desktop-main desktop-aside tablet-main tablet-aside，依此类推。但在实践中，我总是不知所措。你用什么叫平板电脑中的三个连串。它不是主要的，它不是放在一边。它们是三分之一的cols :)当整个容器是它们的布局时，很难不说html中的布局。

此致

Answer 6

试试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个字节！）但是非常强大。

网格系统和响应式布局

6 个答案: