網(wǎng)頁(yè)美工設計

自適應網(wǎng)頁(yè)設計制作的方法和技巧

編輯：時(shí)間：2017-05-04 21:54:44

　　隨著(zhù)越來(lái)越多的人使用手機上網(wǎng)，使自適應網(wǎng)頁(yè)設計技術(shù)變得越來(lái)越流行。自適應網(wǎng)頁(yè)設計指能使網(wǎng)頁(yè)自適應顯示在不同大小終端設備上新網(wǎng)頁(yè)設計方式及技術(shù)。當然，對一個(gè)新手來(lái)說(shuō)可能聽(tīng)起來(lái)有點(diǎn)復雜，其實(shí)它比你想象的簡(jiǎn)單多了（前提你有css基礎）。

　　你要做一個(gè)自適應網(wǎng)站，首先你要了解什么是自適應布局。自適應布局就是一個(gè)網(wǎng)站能兼容適配多個(gè)終端，不需要再為每個(gè)終端做一個(gè)特定的版本。省去了其他終端重新開(kāi)放的麻煩。一個(gè)自適應網(wǎng)站的建設，首先你做的是網(wǎng)頁(yè)的設計，一個(gè)網(wǎng)站是通過(guò)多個(gè)網(wǎng)頁(yè)搭建而成的。自適應網(wǎng)頁(yè)設計你需要做的是：1、允許網(wǎng)頁(yè)寬度自動(dòng)調整。2、相對大小的字體。3、不能使用絕對寬度。4、流動(dòng)布局。

　　響應式網(wǎng)頁(yè)設計優(yōu)勢：流體網(wǎng)格的網(wǎng)站適合響應式網(wǎng)頁(yè)設計。

　　1、靈活性強，可以一個(gè)網(wǎng)站兼容多個(gè)不同終端;

　　2、方便快捷的解決多設備顯示適應問(wèn)題;

　　雖然響應式/自適應網(wǎng)頁(yè)設計會(huì )帶來(lái)兼容各種設備，但是它也有缺點(diǎn)，工作量大、代碼累贅、加載時(shí)間長(cháng)，它們能“一次設計，普遍適用”，可以根據屏幕分辨率自適應以及自動(dòng)縮放圖片、自動(dòng)調整布局，它們不只是技術(shù)的實(shí)現，更多的是對于設計的全新思維模式。對于這些缺點(diǎn)，然而后面的技術(shù)給響應式問(wèn)題進(jìn)行了優(yōu)化。

　　1、在HTML頭部增加viewport標簽。在網(wǎng)站HTML文件的開(kāi)頭，增加viewportmeta標簽告訴瀏覽器視口寬度等于設備屏幕寬度，且不進(jìn)行初始縮放。代碼如下：

　　這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器。

　　2、在CSS文件尾部增加針對不同屏幕分辨率的規則。例如使用如下的代碼，可以讓屏幕寬度低于480像素的設備（如iPhone等），網(wǎng)頁(yè)側欄隱藏中部?jì)热輽趯挾茸詣?dòng)調節。

　　@mediascreenand(max-device-width:480px){

　　#divMain{

　　float:none;

　　width:auto;

　　}

　　#divSidebar{

　　display:none;

　　}

　　3、布局寬度使用相對寬度。

　　網(wǎng)頁(yè)總體框架可以使用絕對寬度，但往下的內容框架、側欄等最好使用相對寬度，這樣針對不同分辨率進(jìn)行修改就方便。當然也可以不用相對寬度，那就需要在@mediascreenand(max-device-width:480px)里面增加各個(gè)div的針對小屏幕的寬度，實(shí)際上更麻煩。

　　4、頁(yè)面使用相對字體（非必要）

　　在HTML頁(yè)面上不要使用絕對字體（px），而要使用相對字體（em），對于大多數瀏覽器來(lái)說(shuō)，通常用em=px/16換算，例如16px就等于1em。

　　5、圖片自適應（非必要）

　　img標簽的話(huà)，只需要設置max-width:100%;或width:100%;語(yǔ)句為：img{max-width:98%;}

　　css加載的background-image如何自適應大小呢，其實(shí)CSS3中是可以實(shí)現的，添加如下語(yǔ)句：background-size:100%100%;

<< 上一篇：網(wǎng)頁(yè)設計首頁(yè)如何布局會(huì )有好的用戶(hù)體驗

>> 下一篇：網(wǎng)頁(yè)設計中圖片有哪些常見(jiàn)的使用技巧

推薦資訊