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

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

編輯：時間：2017-05-04 21:54:44

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

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

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

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

　　2、方便快捷的解決多設(shè)備顯示適應(yīng)問題;

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

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

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

　　2、在CSS文件尾部增加針對不同屏幕分辨率的規(guī)則。例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備（如iPhone等），網(wǎng)頁側(cè)欄隱藏中部內(nèi)容欄寬度自動調(diào)節(jié)。

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

　　#divMain{

　　float:none;

　　width:auto;

　　}

　　#divSidebar{

　　display:none;

　　}

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

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

　　4、頁面使用相對字體（非必要）

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

　　5、圖片自適應(yīng)（非必要）

　　img標(biāo)簽的話，只需要設(shè)置max-width:100%;或width:100%;語句為：img{max-width:98%;}

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

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

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

推薦資訊