移动端h5自适应rem适配

一、rem适配方法，适合窗口大小可能会改变以及设计图小于750，或者大于750设计稿的情况
该方法，将100px为1rem，根据设计稿尺寸缩小100就为 rem，
　　例如：font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}

fnResize()

window.onresize = function () {

fnResize()

}

function fnResize() {

var deviceWidth = document.documentElement.clientWidth || window.innerWidth

if (deviceWidth >= 750) {

deviceWidth = 750

}

if (deviceWidth <= 320) {

deviceWidth = 320

}

document.documentElement.style.fontSize = (deviceWidth / 7.5*2) + 'px'

}

</script>

二、rem适配方法，适合移动设备为固定的某个宽度，以及设计图为固定的某个值例如750，或者pad,1920的情况
该方法，将100px为1rem，根据设计稿尺寸缩小100就为 rem，
　　例如：font-size:14px,换成rem就为0.14rem, div{width:10px;}换成rem就是div{width:0.10rem;}
　　

/**

* 页面自适应方法使用rem单位

* 需要根据布局视口的尺寸动态设置font-size的值

* 无论在什么设备下，我们页面的总宽度都是19.2rem，所以我们直接在设计图上测量px单位的尺寸，然后除以100转换成rem单位后直接使用就可以了

* 比如，在设计图中测量一个元素的尺寸为200px，那么转换成rem单位就是 200 / 100 = 2rem

document.documentElement.style.fontSize =

document.documentElement.clientWidth / 19.2 + 'px';

/**
* 移动端自适应，移动端一定要在头 <head>标签里面加入这段标签,以适应不同手机的视口
*/
<head>

</head>
// 
// 
// 
// 
// 
// 
//

来源：https://www.cnblogs.com/chenhuichao/p/11763135.html

标签

自适应

rem

移动互联网终端