width=device-width：默認(rèn)網(wǎng)頁寬度等于屏幕寬度

initial-scale=1：原始縮放比例為1，即網(wǎng)頁占屏幕面積的100%

對于IE6、7、8需要使用Polyfill庫：css3mediaqueries.js

網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度進(jìn)行布局。并且不能使用絕對單位的其他元素。
寬度只能使用相對單位百分?jǐn)?shù)100%、vw和vh視口寬度和視口高度

不能使用絕對單位的元素：字體使用em、rem等相對單位進(jìn)行設(shè)置

自適應(yīng)網(wǎng)頁需要圖片實(shí)現(xiàn)自動(dòng)縮放：只需要將設(shè)置max-width: 100%即可

在布局系統(tǒng)中，各個(gè)柵格的位置都是浮動(dòng)的，并不固定。主要利用float實(shí)現(xiàn)柵格系統(tǒng)
float的元素不會在水平方向溢出overflow，出現(xiàn)水平滾動(dòng)條；而是直接滾動(dòng)到前面元素的下方。注意絕對定位的使用，小心

響應(yīng)式設(shè)計(jì)的核心是CSS3引入的Media Query模塊。自動(dòng)探測屏幕類型及寬度，符合條件時(shí)加載CSS樣式

Media Query模塊有三種引入方式：

利用@import url("tinyScreen") screen and (max-width: 400px);滿足條件時(shí)，可以在現(xiàn)有CSS文件中加載其他的CSS文件

注：@import與link標(biāo)簽的區(qū)別：

link屬于HTML標(biāo)簽，除引入CSS樣式表還有其他作用；@import是CSS提供的一種加載CSS文件的方式

link標(biāo)簽可以定義RSS、定義rel連接屬性；@import只能加載CSS文件

HTML頁面被下載并且增量解析，link標(biāo)簽被增量解析到便開始加載；@import需要等到HTML頁面下載完畢才開始加載

JavaScript的DOM接口不能操作@import

@import可以在現(xiàn)有CSS文件中引入

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

@media all and (max-width: 768px) {
    /* 滿足查詢條件后應(yīng)用的規(guī)則 */
}

主要步驟：

定義容器寬度：100%，必要時(shí)可以設(shè)置最大寬度max-width。將容器設(shè)置為border-box便于設(shè)置固定寬度的padding

保證行元素不會溢出到其他行：通過前后添加偽元素，清除浮動(dòng)

設(shè)置列寬：根據(jù)100% / 列數(shù)，同時(shí)設(shè)置padding值，用作網(wǎng)格的間距；

設(shè)置不同列數(shù)組合section的寬度：col-n = col- * n

設(shè)置響應(yīng)式網(wǎng)格：根據(jù)媒體查詢，設(shè)置不同的列寬即可，或者應(yīng)用不同的列寬

實(shí)現(xiàn)12列柵格系統(tǒng)

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

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

/* 定義row：行內(nèi)的元素不會溢出到其他行。利用清除浮動(dòng)的方式實(shí)現(xiàn) */
.row::before,
.row::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

/* 設(shè)置列寬：容器寬 / 列數(shù)；這里定義12列 */
/* 使用浮動(dòng)進(jìn)行定位，避免容器內(nèi)沒有內(nèi)容，為容器設(shè)置一個(gè)最小高度1px */
/* 設(shè)置列間距：使用padding。容器使用的是border-box，所以網(wǎng)格水平間距是水平的padding-left與padding-right之和 */
/* 垂直間距是padding-top與padding-bottom */
[class*="col-"] {
    float: left;
    width: 8.33%;
    min-width: 1px;

    padding: 10px;    
}

/* 多個(gè)網(wǎng)格寬度的組合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%;}
}


/* 都不設(shè)置樣式的具體高度，根據(jù)內(nèi)容撐開 */

/* 響應(yīng)式，以768px為分界點(diǎn) */
@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%;}
}

/* ------------------------------------------------------------ */
/* 內(nèi)容的樣式 */
[class*="col-"] > p {
    height: 50px;
    line-height: 50px;
    background: #eee;
    color: red;
    border: 1px solid #999;
}

使用：在屏幕小于768px時(shí)，應(yīng)用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的實(shí)現(xiàn)思路是利用margin-left實(shí)現(xiàn)偏移，距離與列寬相同。只需添加響應(yīng)式規(guī)則中即可

@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，在不同條件應(yīng)用不同的網(wǎng)格；上面例子就是使用這種

利用相同的網(wǎng)格，改變網(wǎng)格的寬度；