隨著4G的普及，越來越多的人使用移動設(shè)備進(jìn)行溝通交流、購物、學(xué)習(xí)等信息汲取，隨之出現(xiàn)了眾多的不同移動設(shè)備，如掌上電腦、IPAD、手機(jī)等等，面對眾多不同型號、不同種類的設(shè)備，網(wǎng)頁設(shè)計師面臨著一個大難題，即如何能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁？

很顯然，如果要兼顧各種不同的設(shè)備尺寸，像以前根據(jù)每個不同尺寸進(jìn)行固定排版肯定行不通。原本針對不同設(shè)備設(shè)計不同網(wǎng)頁的方式，不但要花費(fèi)大量時間、精力進(jìn)行重復(fù)勞動，且容易出現(xiàn)很多網(wǎng)站維護(hù)方面的問題。而自適應(yīng)作為新的網(wǎng)頁布局方式的出現(xiàn)很好的解決了這一問題，自適應(yīng)式的網(wǎng)站也會成為未來主流網(wǎng)站。

下面我們談?wù)勈裁词亲赃m應(yīng)？自適應(yīng)是指在網(wǎng)頁應(yīng)用到不同設(shè)備尺寸時，自動識別其屏幕寬度，并做出相應(yīng)布局調(diào)整的網(wǎng)頁設(shè)計。

例如2列1366像素寬的布局，轉(zhuǎn)到990像素寬度，可自動簡化成1列，將左邊主要內(nèi)容轉(zhuǎn)換到圖片上面去了，而作為手機(jī)頁面時，基本上不管是圖片還是文字，都以上下模塊方式顯示，省略了一些不影響主體展示的次要部分，并對部分圖片進(jìn)行了適當(dāng)?shù)牟们校@就是自適應(yīng)帶給我們的效果展示。

自適應(yīng)存在的展示方式主要有兩種，百分比寬度布局和流式布局。百分比寬度布局：在網(wǎng)頁設(shè)計時要注意，不能使用寬度及寬度的元素，字體也不能使用大小而只能使用相對大小，且圖片實(shí)現(xiàn)自動百分比縮放這是非常重要的。網(wǎng)頁會自動根據(jù)屏幕寬度來調(diào)整頁面百分比。但是無論怎樣縮放，他們主體的內(nèi)容和布局是沒有變化的。

在這種方法使用的過程中暴露出一個問題。當(dāng)網(wǎng)站內(nèi)容過多時，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進(jìn)行適配，但在小屏幕上查看時，卻會感覺內(nèi)容過于擁擠，甚至無法看清，因此現(xiàn)在基本已不在使用這種適配方式了。

而另一種流式布局正是為了解決這一問題而衍生的，其成為了目前主流使用的布局方式。流式布局同樣可以自動識別屏幕寬度，并做出相應(yīng)網(wǎng)頁調(diào)整，但其在布局和展示的內(nèi)容上可能會有所變動。在網(wǎng)頁設(shè)計時各個區(qū)塊的位置都是浮動的，不是固定不變的，當(dāng)屏幕寬度太小，放不下兩個元素時，后面的元素會自動滾動到前面元素的下方進(jìn)行排列，不會在水平方向溢出。這樣在相對較小的屏幕上瀏覽時，就不會出現(xiàn)過于擁擠和看不清的現(xiàn)象了。

同樣，這在使用流式布局時也需要小心定位的使用，加載不同分辨率的圖片也需要注意圖像可能會出現(xiàn)的失真現(xiàn)象。

相對于自適應(yīng)給廣大網(wǎng)頁設(shè)計師們帶來的便捷和效率，其也把因各類CSS文件加載速度稍慢且?guī)磔^大的流量耗費(fèi)等問題帶給了用戶，或許以后會有更好的解決辦法。

 

 

以上 【W(wǎng)eb自適應(yīng)是什么】的內(nèi)容由欣創(chuàng)網(wǎng)絡(luò)（ http://m.madcity.cn）收集整理，本文網(wǎng)址 ： http://m.madcity.cn/news/8newdt.html ，轉(zhuǎn)載請注明出處，如有侵權(quán)，聯(lián)系刪除！

更多有關(guān)漢中網(wǎng)站建設(shè)，漢中網(wǎng)站設(shè)計、漢中網(wǎng)站制作、漢中做網(wǎng)站公司、微信公眾平臺開發(fā)、電商平臺建設(shè) 等互聯(lián)網(wǎng)應(yīng)用服務(wù)都可以聯(lián)系我們。網(wǎng)站建設(shè)熱線： 0916-2233667/手機(jī)：18700660007（朱先生）