网格系统和响应式布局

Question

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

我想你最好通过一个例子来理解:我在一个12列的网格系统中有2个大的列，所以我用.grid-6类和css .grid-6 {width:50%}设置了2个div。在tablet布局中，图形设计人员放置了三列，因此我将这些列的宽度更改为33%，但现在我有一个包含grid-6类(建议宽度为50% )的div，实际列宽为33%。

所以当我开始研究响应性时，感觉就像是"hacks"..我想过为平板电脑和手机或其他设备(<div class="grid-6 tablet-grid-4 phone-grid-3">)添加不同的类别，但感觉就是不对。

当你收到一个图形设计，每个断点都有不同数量的列时，问题就出现了。我的意思是，你不能改变html中的列数吗？

Answer 1

考虑使用。

Cascade框架中的网格元素是

• 下列元素之一:节、主、文章、页眉、页脚、旁注或导航(这些元素是用旧IE的HTMLshiv多重填充的，以备需要时使用)。
• 具有‘
• ’类的div元素(可以在没有多填充的旧IE中使用)。

要为网格元素添加宽度，可以添加一个格式为“width -XofY”的类，其中Y可以是2、3、4、5、6、7、8、9、10、12、16或24，X可以是小于X的任何值。

更具体地说，这里有一些你可以在Cascade框架中使用的有效类的例子：'width-1of2‘(width : 50%)，'width-3of4’(width : 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”等类为不同的宽度范围自定义布局，并使用“桌面隐藏”、“移动隐藏”、“手机隐藏”或“tablet-隐藏”等类为特定屏幕范围隐藏内容。

然而，在某些情况下，这仍然可能导致像<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;
}

上面的步骤将创建与您所解释的柱网轴线类似的柱网轴线。我认为?lol对于移动浏览器来说，将这些转换为一个列是很容易的。将@media视为一种条件。基本上，我已经写了'if device width <= 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 )，那么您可以在所有不同的媒体样式表中随意多次重新定义该类。因为原则上只会根据查看上下文应用一个工作表，所以您的样式将始终适用于查看上下文。这消除了你的多类问题，并清理了你的代码。

如果你想要一个更精确的意见，请发布一些代码，我很乐意给你我的想法。