0

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

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

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

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

4

6 回答 6

2

考虑使用Cascade 框架。

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%）

除了这些类之外，您还可以使用分别适合内容并填充 100% 宽度的任何剩余部分的“width-fit”和“width-fill”类。或者，您可以定义自己的类和 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>or的操作<section class='custom_class'> </section>，然后在自定义 CSS 中自己设置每个断点的宽度。

于 2014-01-07T19:52:35.713 回答
1

我有点迷茫，但我相信你所说的移动浏览器正确吗？如果是这样，@media 是您的解决方案。

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

上面将创建一个类似于您解释的柱状网格。我认为？大声笑将这些转换为移动浏览器的一列很容易。将@media 视为条件。基本上我写了'if device width <= 480px'，它是相对于 iPhone 4gs 和屏幕下方的。

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

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

于 2012-12-17T10:26:31.897 回答
1

首先，最好根据其功能而不是其物理外观来命名一个类……例如navigationContainer，它比 , 更好leftContainer，因为navigationContainer它可以存在于页面上的任何位置。

至于适应不同的布局、屏幕尺寸和方向等，您将需要使用media属性（或@media声明），这将允许您仅将类定义应用于满足某些标准的设备和屏幕。这就是在函数之后命名类的好处。mainContentGrid如果你在一个类的功能之后命名一个类（比如适合查看上下文。这消除了您拥有的多类问题并清理了您的代码。

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

于 2012-12-17T10:27:29.530 回答
0

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

如果您不太关心语义，那么这是您使用tablet-grid-4. 在其类名中使用大小定义的网格不是语义的。您也可以将其命名为诸如此类desktop-main desktop-aside tablet-main tablet-aside。但我在实践中总是达不到自己的要求。平板电脑中的三个偶数列是什么名字？这不是主要的，也不是次要的。它们各占三分之一 :) 当整个容器都是它们的布局时，很难不说 html 中的布局。

问候

于 2013-01-28T01:48:43.033 回答
0

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

于 2012-12-17T10:27:45.643 回答
0

尝试死简单网格。而不是像硬编码网格布局类

<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 字节！）但功能却出奇的强大。

于 2014-01-24T11:40:41.727 回答