使 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) Class manipulation: 覆盖 class 匹配媒体查询的属性，ex:

 @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"

优点：维护更简单，只需添加一个class

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

2) 不同的 classes 不同尺寸和潜水，例如 :

 @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 个？暴民景观：@media only screen and (max-width: 480px) {}

- 最多 680 个？迷你标签 + landscape : @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/

提示：

尽可能使用%，这样会更好看。如果您使用 "pixel" 网格（不是 %，流体），请在列上设置 max-width: 100% 以防止溢出。对于我喜欢这套的容器：

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

我只是像你一样学习 :D

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

Answer 2

    /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

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

Making the grid system in CSS responsive for mobile devices

html

css

html5-canvas