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

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

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

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

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

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

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

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

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

 

 

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

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