网格系统和响应式布局

每当我开始编写一个新的响应页面时，我想出了这个问题，所以我想我问你们这个问题：“在添加响应页面时打破可读性是否正常？网格系统和响应式布局

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

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

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

来源

2012-12-17 Jonas Giuro

您可能需要与平面设计师交谈，并让他从编码的角度尝试理解一些更好的东西。 –

考虑使用Cascade Framework。

在级联框架网格元素是

以下一种HTML元素：部分，主，文章，页眉，页脚，除了或NAV（这些元素polyfilled与HTMLshiv旧IE以防你需要它）。
带'col'类的div元素（可以在没有polyfill的旧IE中使用）。

向宽度添加到栅格元件，添加一个类的格式 '宽度XofY'，这里Y可以是2，3，4，5，6，7，8，9，10 ，12,16或24，X可以是任何低于X的值。

更具体地说，下面是一些您可以在Cascade Framework中使用的有效类的示例：'width-1of2'（width：50％），（width：3of4'（width：25％），'width-2of5'（width：40％），'width-2of5'（width：40％），'width-2of7'（width：28.5714286％）and' 13of16'（width：81.25％）

除了这些类以外，还可以使用分别适合这些类的“宽度匹配”和“宽度填充”类内容并填写任何剩余的100％宽度。或者，您可以定义自己的类和ID，并为这些类添加自定义宽度，以“语义”方式进行操作。

如果您的构建包含响应模块（这是推荐构建的情况），则所有网格元素的宽度会自动重置为移动设备上的100％。您可以使用“mobile-width-3of16”，“phone-width-3of7”或“tablet-width-2of4”等类来自定义不同宽度范围的布局，以及类的“桌面隐藏”，“隐藏手机” ，'手机隐藏'或'平板电脑隐藏'隐藏特定屏幕的范围内容。

但是，在某些情况下，这仍然可能导致诸如<div class='col width-1of4 tablet-1of3 phone-1of2'> </div>之类的内容。在这些情况下，去语义是一种更好的方法。更具体地说，执行类似<div class='col custom_class'> </div>或<section class='custom_class'> </section>的操作，然后在自定义CSS中为每个断点设置宽度。

来源

2014-01-07 19:52:35

我有点迷路，但我相信你在谈论移动浏览器是否正确？如果是@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条件中声明的所有其他样式都从上面的类继承。希望这有助于

来源

2012-12-17 10:26:31 sourRaspberri

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ ^如果需要应该提供更多的帮助。 – sourRaspberri

，首先这是更好地命名它的功能，而不是它的外貌后一类...例如navigationContainer比leftContainer一个更好的名字，为navigationContainer可以在页面上的任何地方存在。

只要适应不同的布局，屏幕大小和方向等，您将需要使用media属性（或@media声明），这将允许您仅将类定义应用于符合特定条件的设备和屏幕。这就是函数之后命名类的好处。如果您的课程在功能后命名（如mainContentGrid），那么您可以在所有不同的媒体样式表中随意多次重新定义班级，因为原则上根据观看上下文仅会应用一张表格，因此您的样式将始终如果你想要更精确的意见，请张贴一些代码，我很乐意为你提供我的想法。

来源

2012-12-17 10:27:29

尽管我可能没有选择最好的方式来提出问题，但是不知何故设法从不同的角度向我展示了问题。我会坚持使用类似“grid-6”的类，因为我发现使用网格系统简化了一些事情，但现在我知道在响应时我不需要讨论类名和宽度。谢谢 –

列的数量应该在所有浏览器尺寸中保持一致;只有它们的宽度和填充值应该改变。然而，通常在移动时将所有列重置为100％宽度，否则它们应该只缩小，不能丢弃完全。我建议回到设计师或者重新设计你的网格，使其具有所有响应遵循的倍数。

来源

2012-12-17 10:27:45 lededje

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

如果你不太关心语义，那么这是一个完美的解决方案，你使用tablet-grid-4来描述。使用其类名中的大小定义的网格不是语义的。您也可以将其命名为desktop-main desktop-aside tablet-main tablet-aside等。但是我在实践中总是缺乏自我。你在平板电脑上的三个甚至是什么名字？这不是主要的，它没有放在一边。它们都是三分之一:)每个容器都是布局时，很难不说html中的布局。

问候

来源

2013-01-28 01:48:43 Sanne

尝试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填充其容器的整个宽度（可以是ano由于支持嵌套，所以支持列！）并将两个元素相互显示。当屏幕足够大时，两列将彼此相邻显示。

死简单网格非常简单（整个CSS代码是250字节！），但出人意料地强大。

来源

2014-01-24 11:40:41

网格系统和响应式布局

回答

相关问题