移动端常用适配方法

REM方法

css中使用的尺寸与设计稿保持一致，body的宽度设为屏幕宽度。将页面宽度定为屏幕宽度，通过设置html的font-size与使用rem来实现尺寸与设计稿一致。

假设设计稿宽度为750px
那么以设计稿为准，设置body的宽度为750px
由于使用rem单位，因此需要设置html标签的font-size
为计算方便，取40px为参照，所以body的宽度为18.75rem
由于设备的dip!=设计稿宽度，因此font-size=deviceWidth/18.75rem
css尺寸为：设计稿标注尺寸/18.75rem

　<script type="text/javascript">
window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {
function c() {
var d = document.documentElement;
var cw = d.clientWidth || 750;
d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';
}
c();
return c;
})(), false);
</script>

设计稿中标注此div的width:750px

换算为rem,即为width:18.75rem

此时 1rem = 40px;将设计稿标注的宽高除以40即可得到rem的值。