移动端H5页面开发的几种方法

单位： px
宽度百分比，高度px
在不同屏幕下的效果是不一样的，可用媒体查询（@media）对不同宽度的手机进行适配，麻烦，不推荐使用

单位：rem
1、flexible
用法：https://blog.csdn.net/sinat_27358671/article/details/82772206
2、原生js重置rem单位

(function (doc, win, imgW) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;console.log(clientWidth);if (!clientWidth) return;if (clientWidth >= imgW) {docEl.style.fontSize = '100px';} else {docEl.style.fontSize = 100 * (clientWidth / imgW) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window, 750);

其中的750为设计稿尺寸，当宽度大于750，html设置字体大小为100px。
如下图，不同宽度下的效果
在这里插入图片描述

单位：vw，vh
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
兼容性：
（1）桌面 PC
• Chrome：自 26 版起就完美支持（2013年2月）
• Firefox：自 19 版起就完美支持（2013年1月）
• Safari：自 6.1 版起就完美支持（2013年10月）
• Opera：自 15 版起就完美支持（2013年7月）
• IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）