如何進(jìn)行自適應(yīng)網(wǎng)頁設(shè)計(jì)？

.背景介紹

如今人們經(jīng)過手機(jī)閱讀網(wǎng)頁占了大多數(shù)，隨著閱讀方式的改動(dòng)，網(wǎng)頁完成多終端自適應(yīng)，無論關(guān)于防止工程師無謂的反復(fù)勞動(dòng)或者是項(xiàng)目管理的便利性上來說重要性都是非常巨大的。

2.知識(shí)剖析

由于挪動(dòng)設(shè)備越來越多的被人們運(yùn)用，手機(jī)成為訪問互聯(lián)網(wǎng)的最常見終端，而我們設(shè)計(jì)的網(wǎng)頁確是為了呈如今PC端。

手機(jī)的屏幕比擬小，寬度通常在600像素以下，而PC的屏幕寬度，普通都在1000像素以上（目前主流寬度是1366×768），有的還到達(dá)了2000像素。同樣的內(nèi)容，要在大小懸殊的屏幕上，都呈現(xiàn)出稱心的效果，并不是一件容易的事。

很多網(wǎng)站的處理辦法，是為不同的設(shè)備提供不同的網(wǎng)頁，比方特地提供一個(gè)mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比擬費(fèi)事，同時(shí)要維護(hù)好幾個(gè)版本，而且假如一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

自適應(yīng)是為了解決如何在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁。

3.常見問題

如何進(jìn)行自適應(yīng)網(wǎng)頁設(shè)計(jì)

4.解決方案

在HTML頭部增加viewport標(biāo)簽。

通俗的講，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域，在具體一點(diǎn)，就是瀏覽器上(也可能是一個(gè)app中的webview)用來顯示網(wǎng)頁的那部分區(qū)域，但viewport又不局限于瀏覽器可視區(qū)域的大小，它可能比瀏覽器的可視區(qū)域要大，也可能比瀏覽器的可視區(qū)域要小。在默認(rèn)情況下，一般來講，移動(dòng)設(shè)備上的viewport都是要大于瀏覽器可視區(qū)域的，這是因?yàn)榭紤]到移動(dòng)設(shè)備的分辨率相對(duì)于桌面電腦來說都比較小，所以為了能在移動(dòng)設(shè)備上正常顯示那些傳統(tǒng)的為桌面瀏覽器設(shè)計(jì)的網(wǎng)站移動(dòng)設(shè)備上的瀏覽器都會(huì)把自己默認(rèn)的viewport設(shè)為980px或1024px（也可能是其它值，這個(gè)是由設(shè)備自己決定的），但帶來的后果就是瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條，因?yàn)闉g覽器可視區(qū)域的寬度是比這個(gè)默認(rèn)的viewport的寬度要小的。

該meta標(biāo)簽的作用是讓當(dāng)前viewport的寬度等于設(shè)備的寬度，同時(shí)不允許用戶手動(dòng)縮放。也許允不允許用戶縮放不同的網(wǎng)站有不同的要求，但讓viewport的寬度等于設(shè)備的寬度，這個(gè)應(yīng)該是大家都想要的效果，如果你不這樣的設(shè)定的話，那就會(huì)使用那個(gè)比屏幕寬的默認(rèn)viewport，也就是說會(huì)出現(xiàn)橫向滾動(dòng)條。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

把移動(dòng)設(shè)備上的viewport分為layout viewport 、 visual viewport 和 ideal viewport 三類，其中的ideal viewport是最適合移動(dòng)設(shè)備的viewport，ideal viewport的寬度等于移動(dòng)設(shè)備的屏幕寬度，只要在css中把某一元素的寬度設(shè)為ideal viewport的寬度(單位用px)，那么這個(gè)元素的寬度就是設(shè)備屏幕的寬度了，也就是寬度為100%的效果。ideal viewport 的意義在于，無論在何種分辨率的屏幕下，那些針對(duì)ideal viewport 而設(shè)計(jì)的網(wǎng)站，不需要用戶手動(dòng)縮放，也不需要出現(xiàn)橫向滾動(dòng)條，都可以完美的呈現(xiàn)給用戶。

要得到ideal viewport就必須把默認(rèn)的layout viewport的寬度設(shè)為移動(dòng)設(shè)備的屏幕寬度。因?yàn)閙eta viewport中的width能控制layout viewport的寬度，所以我們只需要把width設(shè)為width-device這個(gè)特殊的值就行了。

2、不使用絕對(duì)寬度

在css中我們一般使用px作為單位，在桌面瀏覽器中css的1個(gè)像素往往都是對(duì)應(yīng)著電腦屏幕的1個(gè)物理像素，這可能會(huì)造成我們的一個(gè)錯(cuò)覺，那就是css中的像素就是設(shè)備的物理像素。但實(shí)際情況卻并非如此，css中的像素只是一個(gè)抽象的單位，在不同的設(shè)備或不同的環(huán)境中，css中的1px所代表的設(shè)備物理像素是不同的。在為桌面瀏覽器設(shè)計(jì)的網(wǎng)頁中，我們無需對(duì)這個(gè)津津計(jì)較，但在移動(dòng)設(shè)備上，必須弄明白這點(diǎn)。在早先的移動(dòng)設(shè)備中，屏幕像素密度都比較低，如iphone3，它的分辨率為320x480，在iphone3上，一個(gè)css像素確實(shí)是等于一個(gè)屏幕物理像素的。后來隨著技術(shù)的發(fā)展，移動(dòng)設(shè)備的屏幕像素密度越來越高，從iphone4開始，蘋果公司便推出了所謂的Retina屏，分辨率提高了一倍，變成640x960，但屏幕尺寸卻沒變化，這就意味著同樣大小的屏幕上，像素卻多了一倍，這時(shí)，一個(gè)css像素是等于兩個(gè)物理像素的。

3、流動(dòng)布局

流動(dòng)布局（fluid grid） "流動(dòng)布局"的含義是，各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好處是，如果寬度太小，放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。

4、MediaQuery模塊

"自適應(yīng)網(wǎng)頁設(shè)計(jì)"的核心，就是CSS3引入的MediaQuery模塊。它的意思就是，自動(dòng)探測屏幕寬度，然后加載相應(yīng)的CSS文件。

link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"

上面的代碼意思是，如果屏幕寬度小于400像素（max-device-width: 400px），就加載a.css文件。

link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"

如果屏幕寬度在400像素到600像素之間，則加載b.css文件。

5.擴(kuò)展思考

自適應(yīng)與響應(yīng)式的區(qū)別

自適應(yīng)是為了解決如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁，讓同一張網(wǎng)頁自動(dòng)適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動(dòng)調(diào)整網(wǎng)頁內(nèi)容大小。但是無論怎樣，他們主體的內(nèi)容和布局是沒有變的。

自適應(yīng)還是暴露出一個(gè)問題，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進(jìn)行適配，但是會(huì)感覺在小屏幕上查看，內(nèi)容過于擁擠，響應(yīng)式正是為了解決這個(gè)問題而衍生出來的概念。它可以自動(dòng)識(shí)別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，布局和展示的內(nèi)容可能會(huì)有所變動(dòng)。

響應(yīng)式布局被大家熟知的一個(gè)重要原因就是 twitter 開源了 bootstrap。

相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時(shí)也省去了不少建立和維護(hù)的功夫。響應(yīng)式布局就是一種流體，在按百分比縮放時(shí)也能相當(dāng)?shù)牧鲿场?/p>

使用響應(yīng)式設(shè)計(jì)，你要記住所以的布局。這當(dāng)然可能會(huì)使過程混亂，并且使設(shè)計(jì)更加復(fù)雜。這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。所以通常的做法是，在一個(gè)新的項(xiàng)目中使用響應(yīng)式設(shè)計(jì)，在后期的改造中使用自適應(yīng)設(shè)計(jì)。

自適應(yīng)可用于改造現(xiàn)有的網(wǎng)站使其更好地適應(yīng)移動(dòng)端。這使你的設(shè)計(jì)可控制和開發(fā)多個(gè)特定的視圖。你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預(yù)算。然而，它也提供了一定量的控件（例如在內(nèi)容和布局上），如此你便無須使用響應(yīng)式設(shè)計(jì)。但當(dāng)你設(shè)計(jì)多種分辨率時(shí)你會(huì)發(fā)現(xiàn)，在改變窗口大小的時(shí)候?qū)?huì)“跳出”布局。

自適應(yīng)網(wǎng)站可以用于設(shè)計(jì)和開發(fā)一個(gè)擁有多個(gè)自適應(yīng)視圖的網(wǎng)站。所以這種設(shè)計(jì)通常用于改造網(wǎng)站。

5移動(dòng)端頁面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。

使用viewport標(biāo)簽

在HTML文檔頭部添加viewport標(biāo)簽，設(shè)置meta屬性值為“width=device-width”，可以讓瀏覽器根據(jù)設(shè)備屏幕的寬度自動(dòng)調(diào)整頁面的縮放比例，從而實(shí)現(xiàn)頁面自適應(yīng)。

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

每個(gè)屬性的詳細(xì)介紹：

width：#viewport 的寬度，可以指定為一個(gè)像素值，如：600，或者為特殊的值，如：device-width （設(shè)備的寬度）。

height：#viewport的高度。

initial-scale：#初始縮放比例，即當(dāng)瀏覽器第一次加載頁面時(shí)的縮放比例。

maximum-scale：#允許瀏覽者縮放到的最大比例，一般設(shè)為1.0。

minimum-scale：#允許瀏覽者縮放到的最小比例，一般設(shè)為1.0。

user-scalable：#瀏覽者是否可以手動(dòng)縮放，yes或no。

使用CSS3媒體查詢

媒體查詢可以根據(jù)設(shè)備屏幕的寬度和高度來匹配不同的樣式規(guī)則，從而實(shí)現(xiàn)響應(yīng)式布局。通過設(shè)置不同的CSS樣式，可以讓頁面在不同的設(shè)備上呈現(xiàn)不同的布局和樣式。

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設(shè)備上應(yīng)用以下樣式 */
  body {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設(shè)備上應(yīng)用以下樣式 */
  body {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設(shè)備上應(yīng)用以下樣式 */
  body {
    font-size: 18px;
  }
}

使用彈性布局

彈性布局可以根據(jù)設(shè)備屏幕的寬度自動(dòng)調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁面自適應(yīng)。通過設(shè)置元素的flex屬性，可以讓元素按照一定的比例分配剩余空間，從而實(shí)現(xiàn)頁面的自適應(yīng)性。

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 1 300px;
  margin: 10px;
}

使用rem單位

rem單位是相對(duì)于根元素(html元素)的字體大小來計(jì)算的單位，可以根據(jù)設(shè)備屏幕的字體大小自動(dòng)調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁面自適應(yīng)。通過設(shè)置根元素的字體大小，可以讓整個(gè)頁面的元素按照一定的比例進(jìn)行縮放。

html {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  /* 在寬度小于767px的設(shè)備上將根元素的字體大小設(shè)置為14px */
  html {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 在寬度在768px到1023px之間的設(shè)備上將根元素的字體大小設(shè)置為16px */
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1024px) {
  /* 在寬度大于等于1024px的設(shè)備上將根元素的字體大小設(shè)置為18px */
  html {
    font-size: 18px;
  }
}

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em）,使用rem為元素設(shè)定字體大小時(shí)，是相對(duì)大小，但相對(duì)的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

(其他)默認(rèn)html的font-size是16px，即1rem=16px，如果某p寬度為32px你可以設(shè)為2rem。

通常情況下，為了便于計(jì)算數(shù)值則使用62.5%，即默認(rèn)的10px作為基數(shù)。當(dāng)然這個(gè)基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：

Html{font-size:62.5%(10/16*100%)}

具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過js一次定義方法如下：

<script type="text/javascript">
   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據(jù)你設(shè)置的html的font-size屬性值做適當(dāng)?shù)淖兓?        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

使用vw、vh單位

vw和vh是根據(jù)設(shè)備的寬度和高度來決定的，設(shè)備的寬就是100vw，設(shè)備的高就是100vh，
你設(shè)置的50vw就是相當(dāng)于設(shè)備寬度的50%，你設(shè)置的100vh就是相當(dāng)于設(shè)備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設(shè)置100vh，那么基本上(設(shè)備的寬小于高的情況)就會(huì)超出你的屏幕X軸出現(xiàn)滾動(dòng)條。如果你給元素高度設(shè)置100vw，那么就滿足不了你想要把這個(gè)元素鋪滿整個(gè)設(shè)備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。

使用方法：
1. 將設(shè)計(jì)圖放到PS里面，查看整個(gè)圖片的寬度和高度，分別放在設(shè)計(jì)稿寬度和設(shè)計(jì)稿高度當(dāng)中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當(dāng)中。（注意還是px單位哦）
3. 然后點(diǎn)擊換算按鈕，就可以將換算出來的寬度和高度大小放置到你的代碼當(dāng)中了哦。（注意是vw和vh單位哦）

一般移動(dòng)端的布局可分為三個(gè)部分，頭部->主體->tabbar的腳部。
所以我們可以把項(xiàng)目的外層這樣設(shè)置一下：

.body {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* 頭部部分 */
header {
	height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計(jì)圖調(diào)整 */
}
/* 主體部分 */
main {
	flex: 1; /* 占據(jù)頁面剩余所有部分 */
}
/* tabbar腳部部分 */
footer {
	height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計(jì)圖調(diào)整 */
}

使項(xiàng)目中的字體大小自適應(yīng)：

extarea內(nèi)容某個(gè)高度之內(nèi)自適應(yīng)，超過時(shí)候指定高度固定然后出現(xiàn)滾動(dòng)條！

效果如下：當(dāng)你輸入超過設(shè)置的高度后，就會(huì)固定此高度不變。

在線咨詢

上一篇：前端系列：在線認(rèn)識(shí)貝塞爾曲線的運(yùn)動(dòng)軌跡（中文版網(wǎng)站）
下一篇：CSS自動(dòng)換行、強(qiáng)制不換行、強(qiáng)制斷行、超出顯示省略號(hào)

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商