用rem实现移动适配

移动适配是指当网页的显示尺寸随着设备变化时，网页的内容和图标也会跟着调整其尺寸。

rem:移动适配解决方案之一

其实rem就是一个尺寸单位,是参照html标签字号大小的。

所以在使用rem适配时要记得先设置html标签字号大小

 /* 1rem = 1html标签字号大小 */
        html {
            font-size: 20px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }

如图可以得到box的width和height分别为100px和60px。

要使网页内容在不同设备上显示的大小不一样，那就在不同设备下设置不同的html标签字号。

每个设备的像素和视口都不一样，这里就需要用到媒体查询来检测不同设备。

/* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
        @media (width:375px) {
            html {
                font-size: 40px;
            }
        }

        @media (width:320px) {
            html {
                font-size: 30px;
            }
        }

小括号里面的数据是设备的视口宽度

@media里面可以重新设置任何选择器的css，不仅仅是此处html的css。

html的字号一般为视口宽度的1/10。