rem适配

Rem适配

适配：在大屏上显示大盒子，在小屏上显示小盒子。如果是大屏，盒子或字体大上设置的大一点；如果是小屏，盒子或字体大小设置的小一点。效果：字体大小随着屏幕变化而变化。使用媒体查询，实现适配。媒体查询类似于编程语言中的if else。

px：指的是逻辑像素，也叫css像素，在适配时，使用px作为单位并不合适。
em： 指的是一个汉字的宽度，2em表示两个汉字的宽度。
1em = 1个font-size的大小。Font-size有继承性，如果给父标签设置font-size，它的子标签都继承。如：

body{
font-size: 20px;

    }

    div{/* div的的font-size:2*20是40px */

        font-size:2em;

    }

    span{/* 父元素是div，span的font-size是：80px*/

        font-size:2em;

    }

<div>国破山河在<span>城</span>春草木深</div>

Rem：r表示root ，root是根的意思，指html标签
1rem ==> html标签中的font-size的大小

1em ==> 父标签中的font-size的大小

如：样式：html{ font-size: 25px; }

    div{ font-size: 2rem; }

    span{ font-size: 2rem; }

<div>国破山河在<span>城</span>春草木深</div>

利用媒体查询+rem来适配 ：
得到设计稿一般情况下，设计稿的尺寸是750px。
通常我们把浏览器的模拟器也调整成750px。
严格按照设计稿，以rem为单位，把设计稿还原出来。
开始写样式，需要确定html标签的font-size，通常把fontsize定成100px，叫rem的基准值。先量设计稿，量出来的为Px单位，只需要除于100，就换成rem单位。 到此，你先不要管适配，在750px的屏上，还原750的设计稿。
把写好的页面，迁移到其它屏上的，完成适配。
在迁移时，也需要换算。 换算如下：

        在750px的屏上，html的font-size的大小为100px。

        在375px的屏上，html的font-size的大小为50px。

        在320px的屏上，html的font-size的大小为42.6666666px。

        在414px的屏上，html的font-size的大小为55.2px。

6.如果使用媒体查询+rem来适配，需要写如下代码：

@media only screen and (width:750px) { html{ font-size: 100px; } }

    @media only screen and (width:375px) { html{ font-size: 50px; } }

    @media only screen and (width:320px) { html{ font-size: 42.6666px; } }

    @media only screen and (width:414px) { html{ font-size: 55.2px; } }

js+rem适配 ：获取窗口，通过写一个函数来判断屏幕大小从而改变字体大小。