Question

我在CSS中创建我的网格系统。我已经为它编写了以下代码，它工作正常。但我想知道如何使这种布局对低于600px的移动设备做出响应。代码段如下所示。

.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？暴徒风景：@media only screen and（max-width：480px）{}

- 最多680？迷你标签+风景：@media only screen and（max-width：680px）{}

- 最多810？平板电脑和Facebook ：@media only屏幕和（max-width：810px）{}

- 最多1024？计算机：仅@media屏幕和（最大宽度：1024px）{}

- 超过1280？大屏幕：仅@media屏幕和（最大宽度：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：

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中的网格系统对移动设备做出响应

2 个答案: