百分比、響應式、自適應、rem、 em

一. 在HTML的頭部加入meta標籤

　　　　在HTML的頭部，也就是head標籤中增長meta標籤，告訴瀏覽器網頁寬度等於設備屏幕寬度，且不進行縮放，代碼以下：

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

 

 　　　　簡單分析一下這一行代碼的含義：width=device-width表示網頁的寬度等於設備屏幕的寬度，initial-scale=1.0表示設置頁面初始的縮放比例爲1，user-scalable=no表示禁止用戶進行縮放，maximum-scale=1.0 和 minimum-scale=1.0 表示設置最大的和最小的頁面縮放比例。由於各大瀏覽器對meta標籤的解析程度不同，因此咱們要儘量的去兼容全部瀏覽器。

 

　　二. 百分比佈局

　　　　在頁面佈局中，相對寬度和絕對寬度相結合來進行佈局，將更有利於網頁的可維護性。

　　　　下圖分別是拉勾網在iPhone五、iPhone6和iPhone 6 Plus下的佈局，能夠看到隨着設備的屏幕寬度不一樣，即便是同一套網頁代碼顯示出來的字體大小以及間隔也都不同。紅線框內部分就是使用了百分比佈局的作法，對於網頁的可維護性將更好。

                     

 

　　三.  響應式頁面的實現

　　　　目前通常常見的實現響應式有兩種方法，一種是利用媒體查詢，另一種是bootstrap下的柵格佈局，之後介紹bootstrap的時候來介紹柵格佈局，這裏主要來講一下如何利用媒體查詢實現響應式佈局。

　　　　媒體查詢，即 @media 查詢，媒體查詢能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。由於是設置樣式，因此將媒體查詢相關的代碼放在css文件的最下方便可。

　　　　爲了更加清晰地理解響應式的用法，我在下方列舉了兩個案例。第一個案例比較簡單，實現了在不一樣的頁面寬度中改變body的背景顏色的做用。第二個案例以具體的項目來舉例，更加方便用戶

實例1：

若是頁面寬度小於 300 像素,則修改body的背景顏色爲紅色:

@media screen and (max-width: 300px) {
    body {
         background-color:red;
    }
}

 若是頁面寬度大於 300 像素而且小於600像素，則修改body的背景顏色爲綠色:

@media screen and (min-width: 300px) and (max-width:600px) {
    body {
         background-color:green;
    }
}

若是頁面寬度大於 600 像素，則修改body的背景顏色爲藍色:

@media screen and (min-width: 600px) {
    body {
         background-color:blue;
    }
}

 

代碼解釋：

　　screen 表示電腦屏幕，平板電腦，智能手機等，min-width和max-width 用於定義設備中頁面的最小和最大寬度。

 

實例2：視覺中國首頁(http://www.shijue.me/)的響應式實現

　　首先來看該頁面在不一樣窗口中的展現效果：

　　在窗口寬度大於1200px時候的頁面樣式以下：

 

　　在窗口寬度大於900px而且小於1200px時候頁面樣式以下：

 

當頁面寬度小於900px時候頁面樣式以下：

 

接下來咱們來看具體的代碼實現：

　　html代碼以下：注意有幾張圖片則寫幾個col

<div class="group_wrap">
    <div class="group">
        <div class="col">
            <div class="img_logo">
                <img src="img/8.jpg" alt="">
            </div>
        </div>
        <div class="col">
            <div class="img_logo">
                <img src="img/9.jpg" alt="">
            </div>
        </div>
    </div>
</div>

 

css代碼以下，默認是頁面寬度大於1200px時候的頁面：

.group_wrap{
    width: 100%;
    overflow: hidden;
}
.group{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.col{
    width: 280px;
    margin: 10px;
    float: left;
}
.img_logo{
    padding: 10px;
    background: white;
}

 

 實現響應式代碼以下，放在css文件的最下方便可：

/*當頁面的寬度在900px ~ 1200px之間的時候*/
@media screen and (min-width: 900px) and (max-width: 1200px){
    .group{
        width: 900px;
    }
}
/*當頁面的寬度在600px ~ 900px之間的時候*/
@media screen and (min-width:600px) and (max-width: 900px){
    .group{
        width: 600px;
    }
}

 

總結：實際上響應式頁面的實現很是簡單，只要認真學，常常練，必定能夠熟練掌握的！

 

　　

四. 頁面使用相對字體

　　在咱們日常的網頁佈局過程當中常用絕對單位像素(px)來進行佈局，這樣的佈局不適合咱們自適應網頁的實現，因此咱們如今來介紹兩種常見的絕對單位em和rem。rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很類似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

　　1. 相對長度單位em

　　　　　　em的特色 : ① em的值並非固定的; ② em始終會繼承父級元素的字體大小。

　　　　　　廢話很少說，直接上代碼：

html代碼：

<div class="one">
    <span>第一層</span>
    <div class="two">
        <span>第二層</span>
        <div class="three">
            <span>第三層</span>
        </div>
    </div>
</div>

 

css代碼：

body{
    font-size: 20px;
}
.one{
    font-size: 1.5em;
}
.two{
    font-size: 0.5em;
}
.three{
    font-size: 2em;
}

結果： 
　　　.one  --->  30px    1.5 * 20 = 30px
　　　.two  --->  15px    0.5 * 30 = 15px
　　　.three ---> 30px     2  * 15 = 30px  

代碼分析：
　　em會繼承父級元素的字體大小，對於大多數瀏覽器而言，若是沒有給body字體大小，則默認爲16px,因此對於class名稱爲 one 的div而言，它的父親是body，因此 1em = 16px; 本案例中規定了body的字體大小爲20px,因此對於 .one 而言，1em = 20px ,那麼 1.5em = 30px。因此 one 的 font-size 爲30px。
　　對於class名稱爲 two 的div而言，它的父親是 one ,由於em會繼承父級的元素的字體大小，因此 1em = 30px, 那麼 0.5em = 15px，因此 two的 font-size爲15px。
　　對於class名稱爲 three 的div而言，它的父親是 two ,由於em會繼承父級的元素的字體大小，因此 1em = 30px, 那麼 0.5em = 15px，因此 two的 font-size爲15px。

 

　　　　2. 相對長度單位rem 

　　　　　　rem是CSS3新增的一個相對單位（root em，根em），這個單位引發了普遍關注。這個單位與em有什麼區別呢？區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。

　　　　　　咱們來看下面的例子：

html代碼：

<div class="one">
    <span>第一層</span>
    <div class="two">
        <span>第二層</span>
        <div class="three">
            <span>第三層</span>
        </div>
    </div>
</div>

css代碼：

html{
    font-size: 20px;
}
.one{
    font-size: 1.5rem;
}
.two{
    font-size: 0.5rem;
}
.three{
    font-size: 2rem;
}

結果： 
　　　.one  --->  30px    1.5 * 20 = 30px
　　　.two  --->  10px    0.5 * 20 = 10px
　　　.three ---> 40px     2  * 20 = 40px  

 代碼分析：

      rem是CSS3中引進的新單位，rem的值始終相對於根元素html中設置的font-size大小，若是沒有設置，則在大多數瀏覽器中默認爲font-size爲16px，那麼1rem = 16px;

因此對於class名稱爲one的div而言，1.5rem = 1.5 * 20 = 30px。其餘的相似，再也不一一贅述。

 

 

　　　　關於em和rem的總結：

　　　　「em」是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小，在咱們屢次使用時，就會帶來沒法預知的錯誤風險。而rem則相對就好用不少了，就我所在的公司而言，在實際的項目開發中用rem的狀況也是很是多的。估計在不久的未來，國內的設計師將會和國外的設計師同樣，愛上rem。

 

　　五. Js動態設置rem來實現移動端字體的自適應

　　　　實際上講了這麼多，你們可能已經瞭解了rem的用法，可是還不瞭解如何利用rem去實現移動端的自適應。說到底，rem實現移動端自適應的原來在於它自己的特性，它能夠始終根據根元素的字體大小去改變本身的值。目前各類常見手機的屏幕尺寸大小以下圖所示：

           

　　

　　咱們想實現手機端自適應，就是可讓頁面的元素字體、間距、寬高等屬性的屬性值能夠隨着手機屏幕尺寸的變化而變化，接下來咱們看如何利用js來動態的設置rem並實現移動端的自適應，Js代碼以下：

//獲取html元素
var html = document.getElementsByTagName('html')[0]; 
//屏幕的寬度（兼容處理）
var w = document.documentElement.clientWidth || document.body.clientWidth;
//750這個數字是根據你的設計圖的實際大小來的，因此值具體根據設計圖的大小
html.style.fontSize = w / 750 + "px";

 

　　以上代碼實現了利用Js獲取設備屏幕的寬度，並根據屏幕的寬度動態改變根元素html的font-siz屬性的做用。好比說，對於iphone6而言，屏幕尺寸爲750，那麼在iPhone6下html的font-size爲1px,因此1rem = 1px;對於iPhone5而言，屏幕尺寸爲640，那麼在iPhone5下html的font-size爲640/750 = 0.85333px，因此1rem = 0.85333px。這樣的話即便咱們對一個元素設置一樣的大小和單位，也會在不一樣的設備下顯示不一樣的大小。好比說div{width:100rem},在iPhone6下它的寬度將等於100px，而在iPhone5下它的寬度等於100 * 0.85333 = 85.333px。這樣咱們就真正實現了移動端的自適應，怎麼樣，是否是很簡單呢！