rem适配整理

使用媒体查询，实现适配： 媒体查询 类似于 编程语言中的if else

我有一张设计图，一行文字，10个字，在750屏上，是撑满一行的。 还有一张图片，占手机屏的一半。

需要利用媒体查询+rem来适配，步骤如下： 1）得到设计稿 一般情况下，设计稿的尺寸是750px。 2）通常我们把浏览器的模拟器也调整成750px 3）严格按照设计稿，以rem为单位，把设计稿还原出来。 4）开始写样式，需要确定html标签的font-size，通常我会把fontsize 定成100px，叫rem的基准值。

    有一个盒子，width是20px  1rem = 100px。 盒子是20px
    换成rem  换成0.2rem

    又量出一个盒子的宽度是55px，换成rem就是0.55rem。

    说白了，量设计稿，量出来的Px单位，只需要除于100，就成rem单位 

    到此，你先不要管适配，你就在750px的屏上，还原750的设计稿。

5）最后一步，把写好的页面，迁移到其它屏上的，完成适配。
    在迁移时，也需要换算。 换算如下： 
        在750px的屏上，html的font-size的大小为100px。
        在375px的屏上，html的font-size的大小为50px。
        在320px的屏上，html的font-size的大小为42.6666666px。
        在414px的屏上，html的font-size的大小为55.2px。

如果使用媒体查询+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; } }