我在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`请帮帮我。
I am making my grid system in CSS. I had written the following code for it and it is working fine. But i want to know how to make this layout responsive for mobile devices less than 600px. The code snippet is shown below.
.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`Please help me out.
最满意答案
要使其适用于不同的大小，您必须使用媒体查询。 更多信息： 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？ mini tab + landscape ：@media only screen and（max-width：680px）{}
- 高达810？ 平板电脑和Facebook ：@media only屏幕和（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：
To make it work on different sizes you must use media queries. More info: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
At the moment i know about two methods of work:
1) Class manipulation: overwrite class attributes where media query is matched, 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% }In html it would like as class="col-5"
Advantages: simpler to maintain, just one class to add
Disadvantages: you cant set different size for every screen-width
2) Different classes for different sizes and dives like :
@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 }In html it would like for example as class="col-5 col-mob-3"
Advantages: you can even change the size on every breakpoint
Disadvantages: most verbose
Common breakpoints for me are:
- up to 320 ? mob portrait : @media only screen and (max-width: 320px) {}
- up to 480 ? mob landscape : @media only screen and (max-width: 480px) {}
- up to 680 ? mini tab + landscape : @media only screen and (max-width: 680px) {}
- up to 810 ? Tablets and Facebook : @media only screen and (max-width: 810px) {}
- up to 1024 ? Computer : @media only screen and (max-width: 1024px) {}
- over to 1280 ? Large screen : @media only screen and (max-width: 1280px) {}
Here an example : http://socialtab.it/beta/chiusagrande/public/css/grid.css
For others are : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Tips:
Use % when possible, it will look better. Set max-width: 100% on columns to prevent overflow if you are using "pixel" grid (not %, fluid). For the container i love this set:
.container { width: 1060px; max-width: 96%; margin: 0 auto; }I'm just learning as you :D
Sorry for bad English, I've tried my best D:
更多推荐
发布评论