 |
| 昵稱：奈薇建站網(wǎng) |
| 論壇積分：108000 |
| 發(fā)貼等級：21 |
    
    |
| 發(fā)貼數(shù)：1156 |
| 回貼數(shù)：1282 |
被砸雞蛋： 1 |
獲贈鮮花： 182 |
|
 |
|
|
發(fā)表時間：2016/4/28 19:24:00 |
樓 主 |
|
 |
|
 |
|
自適應(yīng)網(wǎng)頁設(shè)計的方法昨天中午Google進行了一次在線講座，講述自適應(yīng)網(wǎng)頁設(shè)計的概念和方法，維護同一個網(wǎng)頁代碼，即可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到智能手機或其他移動產(chǎn)品設(shè)備）上具有更好的閱讀體驗，這里我將該講座內(nèi)容簡要的整理一下。
1、在HTML頭部增加viewport標簽。在網(wǎng)站HTML文件的開頭，增加viewportmeta標簽告訴瀏覽器視口寬度等于設(shè)備屏幕寬度，且不進行初始縮放。代碼如下：<metaname="viewport"content="width=device-width,initial-scale=1"/>這段代碼支持Chrome、Firefox、IE9以上的瀏覽器，但不支持IE8以及低于IE8的瀏覽器。<!--more-->
2、在CSS文件尾部增加針對不同屏幕分辨率的規(guī)則。例如使用如下的代碼，可以讓屏幕寬度低于480像素的設(shè)備（如iPhone等），網(wǎng)頁側(cè)欄隱藏中部內(nèi)容欄寬度自動調(diào)節(jié)。以下代碼針對Z-Blog，WordPress相關(guān)標簽名稱只需修改一下即可。@mediascreenand(max-device-width:480px){#divMain{float:none;width:auto;}#divSidebar{display:none;}}
3、布局寬度使用相對寬度。網(wǎng)頁總體框架可以使用絕對寬度，但往下的內(nèi)容框架、側(cè)欄等最好使用相對寬度，這樣針對不同分辨率進行修改就方便。當然也可以不用相對寬度，那就需要在@mediascreenand(max-device-width:480px)里面增加各個div的針對小屏幕的寬度，實際上更麻煩。
4、頁面使用相對字體在HTML頁面上不要使用絕對字體（px），而要使用相對字體（em），對于大多數(shù)瀏覽器來說，通常用em=px/16換算，例如16px就等于1em。根據(jù)上面講述的幾點內(nèi)容，我針對我博客的CSS進行了一些修改，發(fā)現(xiàn)可以從iPhone手機瀏覽到體驗更佳的頁面，但有一個問題沒有解決，就是頂部導(dǎo)航欄navbar顯示有問題，換行后被下面的文章蓋住了，不知道怎樣能更好地解決這個問題（更新：經(jīng)過網(wǎng)友提示，在導(dǎo)航欄divNavbar的樣式里，加入overflow:hidden;一行即可解決這個問題）。
其他參考：http://www.nev.cn/blog/2012/05/responsive_web_design.html
https://nev.cn/davatron5000/FitText.js
http://nev.cnnev.cn/hustskyking/p/change-fontSize-with-pure-css.html
轉(zhuǎn)載自:http://www.9958.pw/post/html_zsy |
|
 |
 |
 |
|
奈薇建站網(wǎng)致力于，讓每個中國人、每個中國企業(yè)都擁有自己的“官方網(wǎng)站”！ |
|
|
|
|
|