自適應網(wǎng)頁(yè)設計制作的方法和技巧
隨著(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%;
- 2017-05-02平面設計中海報設計中的文字排版技巧
- 2017-04-27室內設計3dmax效果圖制作的詳細流程
- 2017-04-19室內裝修設計的表達方式和技巧
- 2017-04-10網(wǎng)頁(yè)設計首頁(yè)如何布局會(huì )有好的用戶(hù)體驗
- 2017-04-06網(wǎng)頁(yè)設計中怎么用ps切圖
- 2017-03-14網(wǎng)頁(yè)設計的制作詳細流程步驟
- 2017-03-11平面設計中有哪些排版技巧和方法
- 2017-03-08平面設計軟件ps摳圖的幾種方法
- 2017-03-06平面設計中的常用布局方法有哪些
- 2017-03-04網(wǎng)頁(yè)設計師和web前端工程師有什么區別
- 2017-02-25網(wǎng)頁(yè)設計中的色彩心理學(xué)如何選色
- 2017-02-25網(wǎng)頁(yè)美工設計中提升網(wǎng)站氣質(zhì)的方法
- 2017-02-22室內設計客廳顏色色彩搭配技巧
- 2017-02-22平面設計色彩學(xué):對比色配色技巧
- 2017-02-21平面設計中的漢字排版技巧
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16