Js自动转px为rem适配不同屏幕

转载：https://www.cnblogs.com/dannyxie/p/6640903.html

1.常用的单位概论

px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)。

rem（root em，根em）：是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

2.使用rem

1. 先设置header里面的meta标签

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

2. 在header写上<script>标签

// 假设设计稿为640px，则：
<script type="text/javascript">
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px';
</script>

为了方便我们再优化一下，设置监听和加载页面时就设置html基础font-size值：

<script>
	function baseSize(){
		val ele = document.documentElement
		ele.style.fontSize = ele.clientWidth / 640*100 + 'px'
	}
	window.onload=()=>{baseSize()}
	window.onresize=()=>{baseSize()}
</script>

3.备注：

1. 为什么要设置Html的font-size？

答：这里是设置html标签的font-size，上面概论红色字写的很清晰，页面元素使用rem单位时，是相对于这个html标签的font-size的大小为基础的。

2. 为什么 clientWidth / 640后要乘以100？

假如设计稿宽度是640px，设备物理宽度是320px，有一元素在设计稿上的宽度是50px，那么我们在页面上应该设置宽度为 width:50rem，相当于宽度是：50*（320/640）= 25px；

但是一般浏览器的最小字体是12px，如果html的font-size=（320/640）px，即基础font-size=0.5px，那么这个数值就小于12px，会造成页面的一些奇怪的样式问题。假如我们乘以100，则基础font-size是50px，那就可以解决这种小于12px带来的问题了。

因此在使用rem时，我们要除以100，比如设置50的时候要设置为0.5rem

4.解决无法设置html基础font-size值的方法：

在使用vue的px2rem-loader插件以后，会出现无法设置html基础font-size值现象，原因可能是由于里面有什么设置重置了html基础font-size值，解决办法是卸载：px2rem-loader amfe-flexible postcss-px2rem-exclude

命令：

npm uninstall px2rem-loader amfe-flexible postcss-px2rem-exclude