其實，隨着硬件和瀏覽器的不斷更新，曾經的瀏覽器兼容已經不再是開發者的噩夢。而移動H5開發逐漸成為一種主流，不斷趨向於成熟。
所以，我們更需要加以注意的應該是PC端和移動端頁面的適應問題，比如pc端多列變單列，導航欄變側邊欄...
主要問題：
開發時，我們通常還需要考慮到不同電腦屏幕尺寸，以及不同手機屏幕大小等問題，解決當樣式發生改變的情況，那么如何解決呢？
解決：
主要是采用自適應、響應式設計來解決高度，寬度的，以及圖片自適應問題
具體可以參考閱讀
https://www.jb51.net/web/459394.html
移動端
其實，移動端的自適應高度和寬度要更簡單，就是要加入一行viewport標簽
首先，先了解H5頁面的基本組成
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>title</title> 5 </head> 6 <body> 7 </body> 8 </html>
meta viewport模板（支持響應式布局）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> 6 <meta content="yes" name="apple-mobile-web-app-capable"> 7 <meta content="black" name="apple-mobile-web-app-status-bar-style"> 8 <meta content="telephone=no" name="format-detection"> 9 <meta content="email=no" name="format-detection"> 10 <title>標題</title> 11 <link rel="stylesheet" href="index.css"> 12 </head> 13 <body> 這里開始內容 </body> 14 </html>
如上面的meta viewport模板所示，首先，在網頁代碼的頭部，加入一行viewport標簽：
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
viewport，是網頁默認的寬度和高度。
該行代碼表示，網頁的寬度默認等於設備屏幕的寬度，原始縮放比例為1，即網頁初始大小占屏幕面積的100%
重要概念理解
1：由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。具體說，CSS代碼不能指定像素寬度：width:xxx px；可指定百分比寬度：width: xx%；或者width:auto；
2：字體大小一般使用em，盡量少使用px
3：盡量使用流動布局
4：①自適應網頁設計的核心，就是CSS3的引入的media query，多媒體查詢模塊，會自動探測屏幕寬度，然后加載相應的CSS文件
示例：<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="style.css" />，當屏幕小於400時，就加載style.css這個文件
5：②除了使用html標簽加載CSS文件，還可以在現有CSS文件中加載
示例：@import url("style2.css") screen and (max-device-width: 800px)，當小於800px屏幕時，就加載style2.css文件
6：🌂除了使用html標簽和css文件加載css文件，還可以直接在css通過@media來添加css樣式代碼
示例：@media screen and (max-width: 960px){ body{background: #000; }
7：圖片的自動縮放，比較簡單。只需要一行CSS代碼：
img{ max-width: 100%;}，建議根據不同的屏幕分辨率，加載不同大小像素的圖片
結語：
移動端的自適應，大體上差不多就這么多，主要核心是利用@mediaQuery（多媒體查詢），根據不同的屏幕大小，實現不同的布局
要了解更多關於移動端的H5開發，可以閱讀其他博友的整理
淺談