web前端_rem移动适配
前言
这里只说rem原理及原理的一个基本测试。so，需要rem相关的js代码或者css media配置，请移步google|baidu。
1.rem为何物
首先rem是个什么鬼？长的有点像文字单位em。答案是~rem也是一种度量单位，常用于适配各种移动端适配上。
2.rem怎么用
rem怎么用，首先就得知道rem的原理。
其实rem，就是根据html标签font-size大小而改变的一个值。比如当你将Html的font-size设置为100px，那么这是你设置1rem就等于100px了。就是这么简单，上事例代码：
<!DOCTYPE html>
<html>
<head>
<title>rem原理</title>
<meta charset="utf-8">
<style type="text/css">
html {
}
body {
font-size: 16px;
}
.result {
width: 1rem;
height: 1rem;
background-color: red;
}
</style>
</head>
<body>
<div>
rem原理：<br>
rem是基于html的font-size进行调整的，可以根据屏幕的宽度动态设置html的font-size值，从而保证rem对应的比例正确<br>(如chrome默认为16px，就是1:16，设置为x，则是1:x)
</div>
<button onclick="changeFontSize(100)">font-size:100</button>
<button onclick="changeFontSize(50)">font-size:50</button>
<div class="result"></div>
<script type="text/javascript">
const doc = document.documentElement;
function changeFontSize(size) {
doc.style.fontSize = size + 'px';
}
</script>
</body>
</html>
原理就是这样。通过改变html根font-szie的值来设置rem的值。
3.所以这是怎么适配到移动端？
答案是~通过对window对象获取宽度然后除以设计图的宽度，最后乘以一个你希望的比例。这样，你之后的元素就可以用设置图的宽高除以你设置的比例+rem单位来设置了。比如屏幕宽320，你设计图宽600，你的比例设为100，那么html的font-size就设置为 320*100/600 px，然后你的元素在设计图宽60px，你只需要转成rem，即把它设成 60/100 rem即可。将动态设置的代码写成js执行(网上自行搜索)，之后就一劳永逸了。
4.这样就完美了？
不。不是的。这样做在普通屏幕上是已经完美了。但是苹果手机可能是retina屏幕，所以还需要做进一步的兼容。就是你的屏幕宽度需要*你的手机window.devicePixelRatio(设备的dpr)。然后，基本就完美了~
贴个感觉不错的rem介绍网站 :)
