自適應(yīng)網(wǎng)頁就是這么牛！還不會做自適應(yīng)網(wǎng)頁你就out了

自適應(yīng)網(wǎng)頁是什么意思？自適應(yīng)網(wǎng)頁的概念就是指一個網(wǎng)頁能夠在手機上正常顯示，也能夠適應(yīng)在另外一種設(shè)備上，你維護的是同一個網(wǎng)頁代碼，但是可以讓網(wǎng)站在不同的瀏覽設(shè)備上擁有更好更優(yōu)秀的閱讀體驗。那么究竟怎樣做一個優(yōu)秀的自適應(yīng)網(wǎng)頁呢？
第一、在HTML頭部增加viewport標簽
每個網(wǎng)站都有HTML文件開頭，只要簡單的在開頭的地方增加viewport meta標簽，就能夠讓瀏覽器的頁面尺寸與設(shè)備的尺寸相適應(yīng)，并且不需要進行累死初始縮放之類的。要增加這一行代碼：<meta name="viewport" content="width=device-width, initial-scale=1"/>
Chrome、Firefox、IE9以上的瀏覽器都能夠顯示出這段代碼，但是IE8以及低于IE8瀏覽器就不能識別這段代碼了。
第二、在CSS文件尾部增加針對不同屏幕分辨率的規(guī)則
想讓屏幕寬度低于480像素來適應(yīng)設(shè)備（如安卓等），只要在網(wǎng)頁的側(cè)欄上的隱藏中部內(nèi)容中設(shè)置一下欄寬度自動調(diào)節(jié)。有專門的代碼針對Z-Blog的，只需要稍微修改一下WordPress相關(guān)標簽的名稱就可以做到自己想要的效果了。
第三、布局寬度使用相對寬度
絕對寬度可以幫助你實現(xiàn)這個目標，對于網(wǎng)頁總體框架你可以使用絕對寬度，但是之后的內(nèi)容，絕對寬度就不能幫上什么忙了，這時候就要用相對寬度來解決。這樣一來，即使分辨率不同，只要相應(yīng)進行修改就可以了，非常方便。如果你不想要用相對寬度，那就要在@media screen and (max-device-width: 480px)中增加各個div的相對寬度。更加麻煩。
第四、頁面使用相對字體
這一步不是必須的，不過還是提一提。在HTML頁面中，好不要使用絕對字體，而要使用相對字體。這個跟大多數(shù)瀏覽器的性質(zhì)有關(guān)，通常用 em = px/16 換算，例如16px就等于1em。
第五：圖片自適應(yīng)
對于img標簽來說，，只需要設(shè)置標簽的大寬度為100%或?qū)挾葹?00%。
那么用css加載的背景圖片標簽如何自適應(yīng)呢？不要忘了，CSS3是可以實現(xiàn)這些功能的，只需要添加如下語句：background-size:100% 100%就可以輕松的完成了。

分享標題：自適應(yīng)網(wǎng)頁就是這么牛！還不會做自適應(yīng)網(wǎng)頁你就out了
當前路徑：http://muchs.cn/news19/240919.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站維護、Google、用戶體驗、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)