移动端H5开发自适应技巧

移动端H5开发，必要要做到自适应各种分辨率的手机，下面由我为大家大致说一下，需要3步走

第一：head标签中添加：

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

各个参数解释：

width:可视区域的宽度，值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，

maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放，no 禁止缩放

第二：js动态获取屏幕的宽高，配合rem单位使用

  (function(designWidth, maxWidth) {
               var doc = document,
                   win = window,
                   docEl = doc.documentElement,
                   remStyle = document.createElement("style"),
                   tid;
           
               function refreshRem() {
                   var width = docEl.getBoundingClientRect().width;
                   maxWidth = maxWidth || 540;
                   width > maxWidth && (width = maxWidth);
                   var rem = width * 100 / designWidth;
                   remStyle.innerHTML = "html{font-size:" + rem + "px;}"
               }
               if (docEl.firstElementChild) {
                   docEl.firstElementChild.appendChild(remStyle)
               } else {
                   var wrap = doc.createElement("div");
                   wrap.appendChild(remStyle);
                   doc.write(wrap.innerHTML);
                   wrap = null
               }
               refreshRem();
               win.addEventListener("resize", function() {
                   clearTimeout(tid);
                   tid = setTimeout(refreshRem, 300)
               }, false);
               win.addEventListener("pageshow", function(e) {
                   if (e.persisted) {
                       clearTimeout(tid);
                       tid = setTimeout(refreshRem, 300)
                   }
               }, false);
               if (doc.readyState === "complete") {
                   doc.body.style.fontSize = "16px"
               } else {
                   doc.addEventListener("DOMContentLoaded", function(e) {
                       doc.body.style.fontSize = "16px"
                   }, false)
               }
           })(750, 750);

下面的750参数就是UI设计图的参数，配合rem单位直接使用即可，自己可以封装一个js文件，到时候直接导入使用

第三：html中使用rem

　　rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。

来源：https://www.cnblogs.com/lvye001/p/11851791.html

标签

自适应

doc