rem布局

什么是rem ？

• rem是一个相对单位，思想参考的是em，em相对的是当前文字的font-size大小，但是rem相对的是当前html的font-size的大小。
• 例如当前一个字的大小是16px,当前HTML的font-size:50px,也就是说1em=10px,1rem=50px

为什么要用rem

• 目的：实现不同页面宽度和高度都自适应
• 为什么不用em呢？因为em参照的是当前文字的大小 即使width和height设置成一样 不同盒子里的文字大小不同盒子大小也会不同
• 因此，要用rem作为衡量大小的标准，只需要改变不同页面的的font-size值即可实现

怎么用

rem的主要目的就是解决用于不同屏幕的适配问题。rem能够等比例的适配所有的屏幕。

由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，美工一般只会提供750px或者是640px的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。通常解决方案如下：

• 流式布局：虽然可以让各种屏幕都适配，但是显示效果不是非常的友好，因为只有几个尺寸的手机能够完美的显示出来视觉设计师和交互最想要的效果。但是目前使用流式布局的公司非常多，比如 亚马逊 、京东 、携程
• 响应式布局：响应式这种方式在国内很少有大型企业的复杂性的网站在移动端用这种方法去做，主要原因是工作大，维护性难 。所以一般都是中小型的门户或者博客类站点会采用响应式的方法从PC端页面到移动端页面以及web app直接一步到位，因为这样反而可以节约成本。
• rem布局：rem能够适配所有的屏幕，与less配合使用效果会更好。目前使用rem布局的有：淘宝 、 苏宁
• rem配合媒体查询能够实现不同屏幕页面的宽高自适应
• 推荐一个rem的vscode编辑器插件：px2rem ，能够将单位px自动转化为rem

/*
@media screen and (条件){
    html{
        font-siz:值px
    }
}
*/
/*
实现rem的适配
设计图是 750
需要适配的设备：750 720 540 480 424 414 400 384 375 360 320
 定义函数
 */
@media screen and (min-width:320px){
     html{
         font-size: 21.33333px/* 320/50 */
     }
 }
 @media screen and (min-width:360px){
    html{
        font-size: 24px/* 360/50 */
    }
}
@media screen and (min-width:384px){
    html{
        font-size: 25.6px/* 384/50 */
    }
}
@media screen and (min-width:400px){
    html{
        font-size: 26.6666px/* 400/50 */
    }
}
@media screen and (min-width:424px){
    html{
        font-size: 28.26666px/* 4240/50 */
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 32px/* 480/50 */
    }
}
@media screen and (min-width:540px){
    html{
        font-size: 36px/* 540/50 */
    }
}
@media screen and (min-width:720px){
    html{
        font-size: 48px/* 720/50 */
    }
}
@media screen and (min-width:750px){
    html{
        font-size: 50px
    }
}