使用rem原理，62.5%，根据屏幕宽度等比压缩网页
一、前言
我们在编写网页时，往往需要兼顾网页在不同屏宽情况下的显示
而有时为了省事，没时间写新的页面，也为了兼容考虑，这就需要使用等比压缩了
等比压缩的核心是rem
二、正文
（一）rem的使用
rem是css3中新增的一个单位属性
相对长度单位，相对于根元素（即html元素）font-size计算值的倍数
rem在桌面浏览器上的初始值是16px（即1rem=16px）<!-- rem的初始值 -->
<html style="">
<head></head>
<body>
<div style="font-size:1rem"> 此处的1rem即设备的默认字体大小，桌面浏览器默认字体大小是16px
</body>
</html>
<html style="font-size:12px">
<head>
<body>
<div style="font-size:1rem">此处的1rem是12px</div>
</body>
</head>
</html>当然还可以在css上进行赋值，或者使用js进行动态的初始赋值
/*使用css进行rem的赋值*/
html{
font-size:14px; // 此处的初始赋值表示1rem=14px
}（二）rem的62.5%和10px的区别
在桌面浏览器上font-size的默认值是16px；
可知font-size：62.5%；即表示10px；（16*62.5%=10px）
那么font-size：62.5%；和font-size：10px的区别是什么呢？
比较好的解释：
桌面浏览器默认字体是16px，这种情况下设置成具体像素大小或对应的百分比看起来效果是一样的；
但是其他类型的设备的默认字体大小不一定是16px
特别是高分辨率的设备，16px大小的字体在他们上边看起来会非常小，所以不能在body上设置具体像素值，设置成百分比，可以按照设备的基准字体大小给编写的网页设置好最合适的用户浏览的字体大小
最重要的不是屏幕实际的像素大小，屏幕上文字的可读性才是最重要的（三）正确的rem使用方法
如上文所述，使用font-size：62.5%更好
html{
font-size:62.5%;
}然而坑无处不在
新的问题：我们开发常用的chrome浏览器，支持的最小字体大小是12px
/*rem在不同浏览器下的结果*/
html{
font-size:62.5%;
}
header{
height:8rem //在其他浏览器表示80px，在chorme上表示96px
}解决办法：
font-size:625%
1rem = 100px
以此为单位进行换算，可以避免出现以上的问题
(四) em和rem的区别
rem是相对于根节点的font-size计算
em是相对于父节点的font-size计算<html>
<head>
<style>
html{
font-size: 625%
}
.child{
height: 1rem;
width: 1rem;
}
</style>
</head>
<body>
<!-- rem是相对于根节点的font-size计算 -->
<div class="child">此处的1rem = 100px</div>
<!-- em是相对于父节点的font-size计算 -->
<div style="font-size:10px;"><!-- 父元素的字体大小是10px-->
<div style="height:1em;width:1em;"></div><!-- 所以子元素的em是1em=10px；-->
</div>
</body>
</html> (五) <meta name=”viewport”>的含义
<!-- html头部一般会加这么一行代码 -->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
</head>
</html>那么，他有什么作用呢？
viewport用于移动端自适应
但如果是浏览器流动布局的网页 那情况会非常糟糕，设想一个宽 度为30%的侧边栏对于320px手机屏幕而言也就96px，只能容纳8个12px的汉字，可阅读性非常差。
为了让手机也能获得良好的网页浏览体验，Apple找到了一个办法：在移动版(iOS)的Safari中定义了viewport meta标签①，它的作用就是创建一个虚拟的窗口(viewport)，而且这个虚拟窗口的分辨率接近于桌面显示器
width 设置layout viewport 的宽度，为一个正整数，或字符串”width-device”
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport 的高度，这个属性并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许
(六) 根据屏幕宽度等比压缩网页
//根据屏幕计算设计rem的标准中
var documentWidth = document.documentElement.offsetWidth;
if(documentWidth > 1268 ){
document.documentElement.style.fontSize = documentWidth/166 + "px";
} 使用上边代码，可以根据屏幕宽度等比压缩网页
但有两个前提：
1、css代码涉及大小的，统一使用rem进行设置
2、html头部不能使用：<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
同理：当不需要等比压缩网页时，记得把这行代码加上去，否则等比压缩一直存在
原理：是根据屏宽动态的设置根节点font-size，以此进行rem的初始设置，实现对不同屏幕宽度的适配。
