隨著3G的普及，越來(lái)越多的人使用手機(jī)上網(wǎng)。移動(dòng)設(shè)備正超過(guò)桌面設(shè)備，成為訪問(wèn)互聯(lián)網(wǎng)的最常見終端。于是，網(wǎng)頁(yè)設(shè)計(jì)師不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？本篇文章將講述自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)的概念和方法，使網(wǎng)頁(yè)開發(fā)人員維護(hù)同一個(gè)網(wǎng)頁(yè)代碼，即可使網(wǎng)站在多種設(shè)備上具有更好的閱讀體驗(yàn)。本文詳細(xì)介紹了自適應(yīng)網(wǎng)頁(yè)的實(shí)現(xiàn)方法，希望能給迷惑的你帶來(lái)幫助。

一. 在HTML的頭部加入meta標(biāo)簽

在HTML的頭部，也就是head標(biāo)簽中增加meta標(biāo)簽，告訴瀏覽器網(wǎng)頁(yè)寬度等于設(shè)備屏幕寬度，且不進(jìn)行縮放，代碼如下：

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

簡(jiǎn)單分析一下這一行代碼的含義：width=device-width表示網(wǎng)頁(yè)的寬度等于設(shè)備屏幕的寬度，initial-scale=1.0表示設(shè)置頁(yè)面初始的縮放比例為1，user-scalable=no表示禁止用戶進(jìn)行縮放，maximum-scale=1.0 和 minimum-scale=1.0 表示設(shè)置最大的和最小的頁(yè)面縮放比例。因?yàn)楦鞔鬄g覽器對(duì)meta標(biāo)簽的解析程度不一樣，所以我們要盡可能的去兼容所有瀏覽器。

二. 百分比布局

在頁(yè)面布局中，相對(duì)寬度和絕對(duì)寬度相結(jié)合來(lái)進(jìn)行布局，將更有利于網(wǎng)頁(yè)的可維護(hù)性。

下圖分別是拉勾網(wǎng)在iPhone5、iPhone6和iPhone 6 Plus下的布局，可以看到隨著設(shè)備的屏幕寬度不同，即使是同一套網(wǎng)頁(yè)代碼顯示出來(lái)的字體大小以及間隔也都不一樣。紅線框內(nèi)部分就是使用了百分比布局的做法，對(duì)于網(wǎng)頁(yè)的可維護(hù)性將更好。

三.  響應(yīng)式頁(yè)面的實(shí)現(xiàn)

目前一般常見的實(shí)現(xiàn)響應(yīng)式有兩種方法，一種是利用媒體查詢，另外一種是bootstrap下的柵格布局，以后介紹bootstrap的時(shí)候來(lái)介紹柵格布局，這里主要來(lái)說(shuō)一下如何利用媒體查詢實(shí)現(xiàn)響應(yīng)式布局。

媒體查詢，即 @media 查詢，媒體查詢可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)計(jì)響應(yīng)式的頁(yè)面，@media 是非常有用的。當(dāng)你重置瀏覽器大小的過(guò)程中，頁(yè)面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁(yè)面。因?yàn)槭窃O(shè)置樣式，所以將媒體查詢相關(guān)的代碼放在css文件的最下方即可。

為了更加清晰地理解響應(yīng)式的用法，我在下方列舉了兩個(gè)案例。第一個(gè)案例比較簡(jiǎn)單，實(shí)現(xiàn)了在不同的頁(yè)面寬度中改變body的背景顏色的作用。第二個(gè)案例以具體的項(xiàng)目來(lái)舉例，更加方便用戶

實(shí)例1：

如果頁(yè)面寬度小于 300 像素,則修改body的背景顏色為紅色:

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

如果頁(yè)面寬度大于 300 像素并且小于600像素，則修改body的背景顏色為綠色:

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

如果頁(yè)面寬度大于 600 像素，則修改body的背景顏色為藍(lán)色:

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

代碼解釋：

screen 表示電腦屏幕，平板電腦，智能手機(jī)等，min-width和max-width 用于定義設(shè)備中頁(yè)面的最小和最大寬度。

實(shí)例2：視覺中國(guó)首頁(yè)的響應(yīng)式實(shí)現(xiàn)

首先來(lái)看該頁(yè)面在不同窗口中的展示效果：

在窗口寬度大于1200px時(shí)候的頁(yè)面樣式如下：

在窗口寬度大于900px并且小于1200px時(shí)候頁(yè)面樣式如下：

當(dāng)頁(yè)面寬度小于900px時(shí)候頁(yè)面樣式如下：

接下來(lái)我們來(lái)看具體的代碼實(shí)現(xiàn)：

html代碼如下：注意有幾張圖片則寫幾個(gè)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代碼如下，默認(rèn)是頁(yè)面寬度大于1200px時(shí)候的頁(yè)面：

.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;}

實(shí)現(xiàn)響應(yīng)式代碼如下，放在css文件的最下方即可：

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

總結(jié)：實(shí)際上響應(yīng)式頁(yè)面的實(shí)現(xiàn)非常簡(jiǎn)單，只要認(rèn)真學(xué)，經(jīng)常練，一定可以熟練掌握的！

四. 頁(yè)面使用相對(duì)字體

在我們平常的網(wǎng)頁(yè)布局過(guò)程中經(jīng)常使用絕對(duì)單位像素(px)來(lái)進(jìn)行布局，這樣的布局不適合我們自適應(yīng)網(wǎng)頁(yè)的實(shí)現(xiàn)，所以我們現(xiàn)在來(lái)介紹兩種常見的絕對(duì)單位em和rem。rem（font size of the root element）是指相對(duì)于根元素的字體大小的單位。簡(jiǎn)單的說(shuō)它就是一個(gè)相對(duì)單位。看到rem大家一定會(huì)想起em單位，em（font size of the element）是指相對(duì)于父元素的字體大小的單位。它們之間其實(shí)很相似，只不過(guò)一個(gè)計(jì)算的規(guī)則是依賴根元素一個(gè)是依賴父元素計(jì)算。

1. 相對(duì)長(zhǎng)度單位em

em的特點(diǎn) : ① em的值并不是固定的; ② em始終會(huì)繼承父級(jí)元素的字體大小。

廢話不多說(shuō)，直接上代碼：

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;}

結(jié)果：

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

代碼分析：

em會(huì)繼承父級(jí)元素的字體大小，對(duì)于大多數(shù)瀏覽器而言，如果沒有給body字體大小，則默認(rèn)為16px,所以對(duì)于class名稱為 one 的div而言，它的父親是body，所以 1em = 16px; 本案例中規(guī)定了body的字體大小為20px,所以對(duì)于 .one 而言，1em = 20px ,那么 1.5em = 30px。所以 one 的 font-size 為30px。

對(duì)于class名稱為 two 的div而言，它的父親是 one ,因?yàn)閑m會(huì)繼承父級(jí)的元素的字體大小，所以 1em = 30px, 那么 0.5em = 15px，所以 two的 font-size為15px。

對(duì)于class名稱為 three 的div而言，它的父親是 two ,因?yàn)閑m會(huì)繼承父級(jí)的元素的字體大小，所以 1em = 30px, 那么 0.5em = 15px，所以 two的 font-size為15px。

2. 相對(duì)長(zhǎng)度單位rem

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢？區(qū)別在于使用rem為元素設(shè)定字體大小時(shí)，仍然是相對(duì)大小，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身，通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

我們來(lái)看下面的例子：

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;}

結(jié)果：

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

代碼分析：

rem是css3中引進(jìn)的新單位，rem的值始終相對(duì)于根元素html中設(shè)置的font-size大小，如果沒有設(shè)置，則在大多數(shù)瀏覽器中默認(rèn)為font-size為16px，那么1rem = 16px;

所以對(duì)于class名稱為one的div而言，1.5rem = 1.5 * 20 = 30px。其他的類似，不再一一贅述。

關(guān)于em和rem的總結(jié)：

“em”是相對(duì)于其父元素來(lái)設(shè)置字體大小的，這樣就會(huì)存在一個(gè)問(wèn)題，進(jìn)行任何元素設(shè)置，都有可能需要知道他父元素的大小，在我們多次使用時(shí)，就會(huì)帶來(lái)無(wú)法預(yù)知的錯(cuò)誤風(fēng)險(xiǎn)。而rem則相對(duì)就好用很多了，就我所在的公司而言，在實(shí)際的項(xiàng)目開發(fā)中用rem的情況也是非常多的。估計(jì)在不久的將來(lái)，國(guó)內(nèi)的設(shè)計(jì)師將會(huì)和國(guó)外的設(shè)計(jì)師一樣，愛上rem。

五. Js動(dòng)態(tài)設(shè)置rem來(lái)實(shí)現(xiàn)移動(dòng)端字體的自適應(yīng)

實(shí)際上講了這么多，大家可能已經(jīng)了解了rem的用法，但是還不了解如何利用rem去實(shí)現(xiàn)移動(dòng)端的自適應(yīng)。說(shuō)到底，rem實(shí)現(xiàn)移動(dòng)端自適應(yīng)的原來(lái)在于它本身的特性，它可以始終根據(jù)根元素的字體大小去改變自己的值。目前各種常見手機(jī)的屏幕尺寸大小如下圖所示：

我們想實(shí)現(xiàn)手機(jī)端自適應(yīng)，就是可以讓頁(yè)面的元素字體、間距、寬高等屬性的屬性值可以隨著手機(jī)屏幕尺寸的變化而變化，接下來(lái)我們看如何利用Js來(lái)動(dòng)態(tài)的設(shè)置rem并實(shí)現(xiàn)移動(dòng)端的自適應(yīng)，Js代碼如下：

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

以上代碼實(shí)現(xiàn)了利用Js獲取設(shè)備屏幕的寬度，并根據(jù)屏幕的寬度動(dòng)態(tài)改變根元素html的font-siz屬性的作用。比如說(shuō)，對(duì)于iphone6而言，屏幕尺寸為750，那么在iPhone6下html的font-size為1px,所以1rem = 1px;對(duì)于iPhone5而言，屏幕尺寸為640，那么在iPhone5下html的font-size為640/750 = 0.85333px，所以1rem = 0.85333px。這樣的話即使我們對(duì)一個(gè)元素設(shè)置同樣的大小和單位，也會(huì)在不同的設(shè)備下顯示不同的大小。比如說(shuō)div{width:100rem},在iPhone6下它的寬度將等于100px，而在iPhone5下它的寬度等于100 * 0.85333 = 85.333px。這樣我們就真正實(shí)現(xiàn)了移動(dòng)端的自適應(yīng)，怎么樣，是不是很簡(jiǎn)單呢！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。