解决PC端、移动端页面自适应性问题
其实，随着硬件和浏览器的不断更新，曾经的浏览器兼容已经不再是开发者的噩梦。而移动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开发，可以阅读其他博友的整理
浅谈
