h5移动端适配方案
flex布局
flex布局，不使用rem，直接使用px。
<!DOCTYPE html> <html> <head> <title></title> <style> /*利用flex属性，可以实现块级元素1：1：1*/ /*简单的就能使里面的内容居中（尤其是垂直居中，好用到爆）*/ .box{ display: flex;width: 50px;height: 30px; /*默认 row*/ flex-direction:colum; } .item1{ display: flex;flex:1; background-color: rgba(213,34,102); /*justify-content: space-between;*/ justify-content: center; } .item2{ display: flex;flex:1; background-color: rgba(34,213,102); align-items:center; /* display: block; line-height: 10px; height: 10px;*/ } .item3{ display: flex;flex:1; background-color: rgba(102,213,34); /*垂直居中*/ justify-content: center; align-items:center; } </style> } } </head> <body> <div class="box"> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </body> </html>
rem方案
说明：
屏幕根据设计稿的比例转换对应的rem值(JS会根据不同的设备添加不同的缩放比(建议内联处理，在所有资源加载之前执行这个JS))
屏幕根据设计稿的比例转换对应的rem值，比如：
750的设置 = 16*(clientWidth/375)
640的设置 = 20*(clientWidth/320)
320的设置 = 10*(clientWidth/320)
例如：设计稿是750px宽度（基于iphone6 375*2=750 得到的设计稿），如果设计稿中量出某块区域的margin-top值20px，
在实际iphone6设备375px宽度中，应该除以2，所以得到值mragin-top是20/2=10px,
因为1rem=16px（16*（iphone6设备宽度/375）+'px'）,所以对应换算成rem为10/16=0.625rem。
css代码中就是margin-top:0.625rem。
var aa = function(doc, win){ var el = doc.documentElement,//html console.log(el); // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。 resizeEvt =('orientationchange' in win )?'orientationchange':'resize', recalc = function(){ var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框； if(!clientWidth){return;} el.style.fontSize = 16*(clientWidth/375)+'px'; } if(!doc.addEventListener){return;} // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick， // 第二个是要执行的函数，第三个是布尔值 win.addEventListener(resizeEvt,recalc,false); // 绑定浏览器缩放与加载时间 win.addEventListener('DOMContentLoaded',recalc,false); } (function(doc, win){ var el = doc.documentElement,//html console.log(el); // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。 resizeEvt =('orientationchange' in win )?'orientationchange':'resize', recalc = function(){ var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框； if(!clientWidth){return;} el.style.fontSize = 16*(clientWidth/375)+'px'; } if(!doc.addEventListener){return;} // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick， // 第二个是要执行的函数，第三个是布尔值 win.addEventListener(resizeEvt,recalc,false); // 绑定浏览器缩放与加载时间 win.addEventListener('DOMContentLoaded',recalc,false); })(document, windo
// 移动端H5终端适配方案 var aa = function(doc, win){ var el = doc.documentElement,//html // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。 resizeEvt =('orientationchange' in win )?'orientationchange':'resize', recalc = function(){ var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框； if(!clientWidth){return;} el.style.fontSize = 16*(clientWidth/375)+'px'; } // console.log(el); if(!doc.addEventListener){return;} // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick， // 第二个是要执行的函数，第三个是布尔值 win.addEventListener(resizeEvt,recalc,false); // 绑定浏览器缩放与加载时间 win.addEventListener('DOMContentLoaded',recalc,false); } (function(doc, win){ var el = doc.documentElement,//html // orientationchange 事件是在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。 resizeEvt =('orientationchange' in win )?'orientationchange':'resize', recalc = function(){ var clientWidth = el.clientWidth;//clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框； if(!clientWidth){return;} el.style.fontSize = 16*(clientWidth/375)+'px'; } // console.log(el); if(!doc.addEventListener){return;} // addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick， // 第二个是要执行的函数，第三个是布尔值 win.addEventListener(resizeEvt,recalc,false); // 绑定浏览器缩放与加载时间 win.addEventListener('DOMContentLoaded',recalc,false); })(document, window);
rem方案二
引入flexible.js，不需要在html结构中加入viewport标签。
flexible.js会在<html>元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，
比如说2或者3同时会给html加上对应的font-size的值，
比如说75px；以及会添加viewport标签，JS会根据不同的设备添加不同的缩放比(建议内联处理，在所有资源加载之前执行这个JS)
