第一步：在網頁代碼的頭部，加入一行viewport元標簽

viewport是網頁默認的寬度和高度，上面這行代碼的意思是：網頁寬度默認等于屏幕寬度(width=device-width)，原始縮放比例(initial-scale=1)為1.0，即網頁初始大小占屏幕面積的100%。

所有主流瀏覽器都支持這個設置，包括IE9。對于那些老式瀏覽器(主要是IE6、7、8)，需要使用css3-mediaqueries.js

第二步：(注意)不使用絕對寬度，字體大小

width:auto; / width:XX%;

第三步：(注意)字體大小

字體大小是頁面默認大小的100%，即16像素

字體不要使用絕對大小"PX"，要使用相對大小“REM”

body {font:normal 100% Arial,sans-serif;font-size:14px; font-size:1.4rem; }

第四步：流動布局

"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的

第五步：選擇加載CSS

"自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。自動探測屏幕寬度，然后加載相應的CSS文件

href="style/css/css600.css" />

第六步：CSS的@media規則

@media screen and (max-device-width: 400px) { .left{ float:none;} }

總結

以上是生活随笔為你收集整理的极简 响应式 html5,HTML5----响应式（自适应）网页设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。