如何让页面中的各种尺寸自适应
如何让页面中的各种尺寸自适应
需求：设计搞的尺寸需要在各种屏幕上等比缩放
我们需要找到一种单位 a ，它能和设计稿的尺寸对应起来，比如：1a = 设计稿100px
css3 中的 rem 单位，表示相对于网页根元素的字体大小。
如果能保证根元素的字体大小始终等于设计稿中的100px，则rem就是要找的单位a。
如：
| 设计稿宽度 | 设备视口宽度 | 根元素字体大小 |
| 700 | 700 | 100px |
| 700 | 350 | 50px |
| 800 | 600 | 75px |
| 750 | 375 | 50px |
function setFont(){
var html = document.documentElement;//根元素
var designWidth = 800;//设计稿宽度
//html.clientWidth:视口宽度
//clientWidth = width(样式中设置的)+左padding+右padding - 垂直滚动条宽度。
//offsetWidth=width(样式中设置的)+左右padding+左右border
html.style.fontSize = (html.clientWidth / designWidth) * 100 + "px";//设置字体大写
}
setFont();
//设备尺寸变化时，重新设置根元素字体大小
window.onresize = setFont;
//注意：为了避免污染全局变量，可以把这整个函数放到立即函数里面 
投递大疆等公司8个岗位
