html - 使 CSS 中的网格系统响应移动设备

Question

我正在用 CSS 制作我的网格系统。我已经为它编写了以下代码并且运行良好。但我想知道如何使此布局响应小于 600 像素的移动设备。代码片段如下所示。

.grid-container {
    width: 100%;
    max-width: auto;
}

/*-- our cleafix hack -- */
.row:before,.row:after {
    content: "";
    display: table;
    clear: both;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
    /*-- our gutter -- */
    padding: 12px;
    background-color: #FFDCDC;
}

.col-1 {
    width: 16.66%;
}

.col-2 {
    width: 31%;
}

.col-3 {
    width: 48%;
}

.col-4 {
    width: 66.66%;
}

.col-5 {
    width: 83.33%;
}

.col-6 {
    width: 100%;
}

.outline,.outline * {
    outline: 1px solid #F6A1A1;
}

/*-- some extra column content styling --*/
[class*='col-']>p {
    background-color: #FFC2C2;
    padding: 0;
    margin: 0;
    text-align: center;
    color: white;
}`enter code here`

请帮帮我。

Answer 1

要使其适用于不同尺寸，您必须使用媒体查询。更多信息:http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

目前我知道两种工作方法:

1) 类操作:在媒体查询匹配的地方覆盖类属性，例如:

 @media only screen and (max-width: 600px)  {    //apply if screen is < 600px
      .col-5 { width: 50% }       // overwrite the width of 83.33% to 50%
 }   

在 html 中它像 class="col-5"

优点:维护更简单，只需添加一个类

缺点:你不能为每个屏幕宽度设置不同的尺寸

---

2) 不同等级针对不同体型和潜水，例如:

 @media only screen and (max-width: 600px)  {    //apply if screen is < 600px
      .col-mob-3 { width: 50% }   //only if the max-width < 600 set attr
 }

在 html 中，例如 class="col-5 col-mob-3"

优点:您甚至可以在每个断点处更改大小

缺点:最冗长

---

我常用的断点是:

- 高达 320 ?暴民肖像:@media only screen and (max-width: 320px) {}

- 高达 480 ? mob landscape:@media only screen and (max-width: 480px) {}

- 高达 680 ?迷你标签 + 横向:@media only screen and (max-width: 680px) {}

- 高达 810 ?平板电脑和 Facebook:@media only screen and (max-width: 810px) {}

- 高达 1024 ?计算机:@media only screen and (max-width: 1024px) {}

- 超过 1280？大屏幕:@media only screen and (max-width: 1280px) {}

这里有一个例子:http://socialtab.it/beta/chiusagrande/public/css/grid.css

其他人是:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

---

提示:

尽可能使用 %，它看起来会更好。如果您使用“像素”网格(不是 %，流体)，请在列上设置 max-width: 100% 以防止溢出。对于容器，我喜欢这套:

.container {
   width: 1060px;
   max-width: 96%;
   margin: 0 auto;
}

我只是像你一样学习 :D

抱歉英语不好，我已经尽力了 D: