這次帶給大家怎麼做出H5響應式網頁設計,H5做出響應式網頁設計的注意事項有哪些,以下就是實戰案例,一起來看一下。
本文介紹了HTML5響應式(自適應)網頁設計的實現,分享給大家,具體如下:
第一步:在網頁程式碼的頭部,加入一行viewport元標籤
1 | <meta name= "viewport" content= "width=device-width, initial-scale=1" />
|
登入後複製
viewport是網頁預設的寬度和高度,上面這行程式碼的意思是:網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。
所有主流瀏覽器都支援這個設置,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js
第二步:(注意)不使用絕對寬度,字體大小
第三步:(注意)字體大小
字體大小是頁面預設大小的100%,即16像素
字體不要使用絕對大小"PX",要使用相對大小“REM”
#第四步:流動佈局
"流動佈局"的意思是,各區塊的位置都是浮動的,不是固定不變的
其好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向 overflow(溢位),避免了水平捲軸的出現
第五步:選擇載入CSS
"自適應網頁設計"的核心,就是CSS3引進的Media Query模組。自動探測螢幕寬度,然後載入對應的CSS檔案
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <style type= "text/css" >
img{ max-width:100%;}
video{ max-width:100%; height:auto;}
header ul li{ float:left; list-style:none; list-style-type:none; margin-right:10px;}
header select{display:none;}
@media (max-width:960px){
header ul{ display:none;}
header select{ display:inline-block;}
}
</style>
<body>
<header>
<ul>
<li><a href= "#" class= "active" >Home</a></li>
<li><a href= "#" >AAA</a></li>
<li><a href= "#" >BBB</a></li>
<li><a href= "#" >CCC</a></li>
<li><a href= "#" >DDD</a></li>
</ul>
<select>
<option class= "selected" ><a href= "#" >Home</a></option>
<option value= "/AAA" >AAA</option>
<option value= "/BBB" >BBB</option>
<option value= "/CCC" >CCC</option>
<option value= "/DDD" >DDD</option>
</select>
</header>
</body>
|
登入後複製
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
H5怎麼實作拖放功能
#H5的區塊級標籤總和
關於舊版的瀏覽器不相容H5和C3的處理方法
以上是怎麼做H5響應式網頁設計的詳細內容。更多資訊請關注PHP中文網其他相關文章!