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

時間：2023-10-02 20:12:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-02 20:12:01 來源：網(wǎng)站運(yùn)營

如何進(jìn)行自適應(yīng)網(wǎng)頁設(shè)計?：1.背景介紹

現(xiàn)在人們通過手機(jī)瀏覽網(wǎng)頁占了大多數(shù)，隨著瀏覽方式的改變，網(wǎng)頁實現(xiàn)多終端自適應(yīng)，無論對于避免工程師無謂的重復(fù)勞動或者是項目管理的便捷性上來說重要性都是十分巨大的。

2.知識剖析

由于移動設(shè)備越來越多的被人們使用，手機(jī)成為訪問互聯(lián)網(wǎng)的最常見終端，而我們設(shè)計的網(wǎng)頁確是為了呈現(xiàn)在PC端。

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

很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁，比如專門提供一個mobile版本，或者iPhone / iPad版本。這樣做固然保證了效果，但是比較麻煩，同時要維護(hù)好幾個版本，而且如果一個網(wǎng)站有多個portal（入口），會大大增加架構(gòu)設(shè)計的復(fù)雜度。

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

3.常見問題

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

4.解決方案

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

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

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

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

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

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

2、不使用絕對寬度

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

3、流動布局

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

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

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

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

4、MediaQuery模塊

"自適應(yīng)網(wǎng)頁設(shè)計"的核心，就是CSS3引入的MediaQuery模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應(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.編碼實戰(zhàn)

demo

6.擴(kuò)展思考

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

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

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

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

相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時也省去了不少建立和維護(hù)的功夫。響應(yīng)式布局就是一種流體，在按百分比縮放時也能相當(dāng)?shù)牧鲿场?br>
使用響應(yīng)式設(shè)計，你要記住所以的布局。這當(dāng)然可能會使過程混亂，并且使設(shè)計更加復(fù)雜。這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。 所以通常的做法是，在一個新的項目中使用響應(yīng)式設(shè)計，在后期的改造中使用自適應(yīng)設(shè)計。

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

---

如果你是前端小白或者打算轉(zhuǎn)行進(jìn)入前端這個行業(yè)，不知道未來該怎么學(xué)習(xí)，都可以加入我組建的自學(xué)團(tuán)，每天一起打卡學(xué)習(xí)，分享學(xué)習(xí)資料，定期組織實戰(zhàn)項目，匹配學(xué)習(xí)伙伴，我會嚴(yán)格監(jiān)督你們的。

作者：IT修真院

原文鏈接：如何進(jìn)行自適應(yīng)網(wǎng)頁設(shè)計?_IT修真院：初學(xué)者轉(zhuǎn)行到互聯(lián)網(wǎng)的聚集地-CSDN博客