昨(zuó)天中午Google進行了一次在(zài)綫講(jiǎng)座，講述(shù)自適(shì)應(yīng)網頁(yè)設計的(dí)概念(niàn)和(hé)方法，維護(hù)同(tóng)一(yī)個(gè)網(wǎng)頁(yè)代碼，即可(kě)使網站(zhàn)在多種瀏(liú)覽設備（從桌麵電腦顯示器到智能(néng)手機或其他(tā)移動(dòng)產(chǎn)品(pǐn)設(shè)備）上具有(yǒu)更好的(dí)閱(yuè)讀(dú)體(tǐ)驗(yàn)，這裏我(wǒ)將該(gāi)講(jiǎng)座內容簡要的(dí)整(zhěng)理一(yī)下。
1，在HTML頭部增(zēng)加(jiā)viewport標簽(qiān)。
在網站(zhàn)HTML文件(jiàn)的開頭(tóu)，增(zēng)加viewport meta標簽(qiān)告訴瀏覽(lǎn)器視口寬(kuān)度等於設備屏幕寬度(dù)，且不進行(háng)初(chū)始(shǐ)縮放(fàng)。代(dài)碼如(rú)下：
<meta name="viewport" content="width=device-width, initial-scale=1" />
這段(duàn)代碼(mǎ)支持Chrome，Firefox，IE9以(yǐ)上的(dí)瀏覽器，但不支(zhī)持(chí)IE8以及低於(yú)IE8的(dí)瀏覽器(qì)。
2，在(zài)CSS文(wén)件尾(wěi)部(bù)增加針(zhēn)對不同(tóng)屏幕(mù)分(fēn)辨率的規(guī)則。
例如(rú)使(shǐ)用如下(xià)的(dí)代碼(mǎ)，可以(yǐ)讓(ràng)屏(píng)幕寬(kuān)度低(dī)於(yú)480像素的設(shè)備(bèi)（如iPhone等），網(wǎng)頁(yè)側欄隱藏中部內容欄(lán)寬(kuān)度自(zì)動調(tiáo)節。以下代碼(mǎ)針(zhēn)對Z-Blog，WordPress相關標(biāo)簽名(míng)稱(chēng)隻需修(xiū)改(gǎi)一下(xià)即可。
@media screen and (max-device-width: 480px) {
#divMain{
float: none;
width:auto;
}
#divSidebar {
display:none;
}
}
3，布(bù)局寬(kuān)度(dù)使(shǐ)用(yòng)相對(duì)寬度。
網(wǎng)頁(yè)總體框架(jià)可以使用(yòng)絕(jué)對(duì)寬度(dù)，但往(wǎng)下的內容框(kuàng)架，側欄等(děng)最(zuì)好使(shǐ)用(yòng)相對寬度，這(zhè)樣(yàng)針(zhēn)對不同分辨率(shuài)進行(háng)修(xiū)改(gǎi)就方便。當(dāng)然也可以不(bù)用(yòng)相對(duì)寬度(dù)，那(nà)就需要(yào)在 @media screen and (max-device-width: 480px) 裏麵增(zēng)加(jiā)各個div的針(zhēn)對小(xiǎo)屏(píng)幕的寬度(dù)，實際上更(gēng)麻(má)煩(fán)。
4，頁麵使用相對字(zì)體
在HTML頁(yè)麵上不要使用絕(jué)對(duì)字體（px），而(ér)要(yào)使用相對(duì)字體(tǐ)（em），兩者換(huàn)算關(guān)係(xì)是：em = px/16 ，例如16px就(jiù)等於(yú)1em。
根據上麵講述的幾點(diǎn)內容，我針對我博(bó)客的(dí)CSS進行了一些修(xiū)改，發現(xiàn)可(kě)以從iPhone手(shǒu)機(jī)瀏(liú)覽到(dào)體驗(yàn)更加(jiā)的頁(yè)麵(miàn)，但有一個問(wèn)題沒(méi)有(yǒu)解決，就是(shì)頂(dǐng)部導(dǎo)航(háng)欄navbar顯示有問(wèn)題(tí)，換行(háng)後被(bèi)下(xià)麵(miàn)的(dí)文章蓋(gài)住了，不知(zhī)道怎樣(yàng)能(néng)更(gēng)好地(dì)解決(jué)這(zhè)個問(wèn)題。
總(zǒng)之(zhī)，根(gēn)據(jù)上麵四步(bù)進行修(xiū)改的話(huà)，可以(yǐ)很(hěn)簡單地將(jiāng)一個網站修改為適(shì)合多(duō)種設備瀏(liú)覽(lǎn)的頁(yè)麵，這(zhè)對於(yú)通(tōng)過(guò)手機訪(fǎng)問網站(zhàn)的(dí)用(yòng)戶來說，的確是一(yī)件(jiàn)好事(shì)。
轉載請保留(liú)原文地址: https://antelcom.cn/show-34.html