CSS || @media媒体查询

摘要：并且不能使用绝对单位的其他元素。注意绝对定位的使用，小心引入不同样式响应式设计的核心是引入的模块。利用清除浮动的方式实现设置列宽容器宽列数这里定义列使用浮动进行定位，避免容器内没有内容，为容器设置一个最小高度设置列间距使用。

响应式网页设计Responsive Web Design指可以自动识别屏幕宽度，对并对样式做出相应调整
通过媒体查询实现在不同屏幕宽度下加载不同的CSS样式

viewport表示视口：浏览器可视区域宽度和高度

width=device-width：默认网页宽度等于屏幕宽度

initial-scale=1：原始缩放比例为1，即网页占屏幕面积的100%

对于IE6、7、8需要使用Polyfill库：css3mediaqueries.js

网页会根据屏幕宽度调整布局，所以不能使用绝对宽度进行布局。并且不能使用绝对单位的其他元素。
宽度只能使用相对单位百分数100%、vw和vh视口宽度和视口高度

不能使用绝对单位的元素：字体使用em、rem等相对单位进行设置

自适应网页需要图片实现自动缩放：只需要将设置max-width: 100%即可

在布局系统中，各个栅格的位置都是浮动的，并不固定。主要利用float实现栅格系统
float的元素不会在水平方向溢出overflow，出现水平滚动条；而是直接滚动到前面元素的下方。注意绝对定位的使用，小心

响应式设计的核心是CSS3引入的Media Query模块。自动探测屏幕类型及宽度，符合条件时加载CSS样式

Media Query模块有三种引入方式：

利用@import url("tinyScreen") screen and (max-width: 400px);满足条件时，可以在现有CSS文件中加载其他的CSS文件

注：@import与link标签的区别：

link属于HTML标签，除引入CSS样式表还有其他作用；@import是CSS提供的一种加载CSS文件的方式

link标签可以定义RSS、定义rel连接属性；@import只能加载CSS文件

HTML页面被下载并且增量解析，link标签被增量解析到便开始加载；@import需要等到HTML页面下载完毕才开始加载

JavaScript的DOM接口不能操作@import

@import可以在现有CSS文件中引入

在CSS文件中，使用@media引入一段查询的样式

@media all and (max-width: 768px) {
    /* 满足查询条件后应用的规则 */
}

主要步骤：

定义容器宽度：100%，必要时可以设置最大宽度max-width。将容器设置为border-box便于设置固定宽度的padding

保证行元素不会溢出到其他行：通过前后添加伪元素，清除浮动

设置列宽：根据100% / 列数，同时设置padding值，用作网格的间距；

设置不同列数组合section的宽度：col-n = col- * n

设置响应式网格：根据媒体查询，设置不同的列宽即可，或者应用不同的列宽

实现12列栅格系统

/* 使用border-box，便于在百分比宽度容器中设置固定宽度的padding */
* {box-sizing: inherit;}
html {box-sizing: border-box;}
p{margin: 0;}

/* 定义容器宽度 */
.grid_container {
    width: 100%;
    max-width: 1200px;
}

/* 定义row：行内的元素不会溢出到其他行。利用清除浮动的方式实现 */
.row::before,
.row::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 设置列宽：容器宽 / 列数；这里定义12列 */
/* 使用浮动进行定位，避免容器内没有内容，为容器设置一个最小高度1px */
/* 设置列间距：使用padding。容器使用的是border-box，所以网格水平间距是水平的padding-left与padding-right之和 */
/* 垂直间距是padding-top与padding-bottom */
[class*="col-"] {
    float: left;
    width: 8.33%;
    min-width: 1px;

    padding: 10px;    
}

/* 多个网格宽度的组合section */

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
}


/* 都不设置样式的具体高度，根据内容撑开 */

/* 响应式，以768px为分界点 */
@media screen and (max-width: 768px) {
    .col-sm-1 {width: 8.33%;}
    .col-sm-2 {width: 16.66%;}
    .col-sm-3 {width: 25%;}
    .col-sm-4 {width: 33.33%;}
    .col-sm-5 {width: 41.66%;}
    .col-sm-6 {width: 50%;}
    .col-sm-7 {width: 58.33%;}
    .col-sm-8 {width: 66.66%;}
    .col-sm-9 {width: 75%;}
    .col-sm-10 {width: 83.33%;}
    .col-sm-11 {width: 91.66%;}
    .col-sm-12 {width: 100%;}
}

/* ------------------------------------------------------------ */
/* 内容的样式 */
[class*="col-"] > p {
    height: 50px;
    line-height: 50px;
    background: #eee;
    color: red;
    border: 1px solid #999;
}

使用：在屏幕小于768px时，应用col-sm-类的样式。

    

        
col-4
        
col-4
        
col-4
    
    

        
col-3
 
        
col-6
 
        
col-3
 
    
 
    

        
col-1
 
        
col-1
 
        
col-2
 
        
col-2
 
        
col-6
 
    
 

offset的实现思路是利用margin-left实现偏移，距离与列宽相同。只需添加响应式规则中即可

@media screen and (min-width: 769px) {
    .col-md-1 {width: 8.33%;}
    .col-md-2 {width: 16.66%;}
    .col-md-3 {width: 25%;}
    .col-md-4 {width: 33.33%;}
    .col-md-5 {width: 41.66%;}
    .col-md-6 {width: 50%;}
    .col-md-7 {width: 58.33%;}
    .col-md-8 {width: 66.66%;}
    .col-md-9 {width: 75%;}
    .col-md-10 {width: 83.33%;}
    .col-md-11 {width: 91.66%;}
    .col-md-12 {width: 100%;}
    /* 偏移offset */
    .col-md-offset-1 {margin-left: 8.33%;}
    .col-md-offset-2 {margin-left: 16.66%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-4 {margin-left: 33.33%;}
    .col-md-offset-5 {margin-left: 41.66%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-7 {margin-left: 58.33%;}
    .col-md-offset-8 {margin-left: 66.66%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-10 {margin-left: 83.33%;}
    .col-md-offset-11 {margin-left: 91.66%;}
    .col-md-offset-12 {margin-left: 100%;}
}

多写class，在不同条件应用不同的网格；上面例子就是使用这种

利用相同的网格，改变网格的宽度；