css中单位em和rem的区别 和媒体查询 移动端适配的问题

1. 1em等于一个字体的大小,默认16px     em和父元素字体大小有关  也和自己的字体大小有关

 

.box{
           background-color: pink;
            width: 2em;
            height: 2em;
            font-size: 50px;
    }

此时 1rem=50px

2.rem只和html标签有关

html{
            font-size: 120px;
        }

此时1rem=120px

3.因为rem的特性,可以媒体查询当前屏幕的宽度并在设置html中的跟字体的大小,可以适合多个屏幕下的要求 ,一般情况下可以看成把屏幕均分成10等分,每一份在标准稿下是默认的375px/10=37.5px,可以理解为1rem =37.5px, 所以在开发中,测量的像素值/37.5的值就是多少rem.例如

.box{
            background-color: yellow;
            width: 2rem;
            height: 2rem;
        }

这是一个宽度70px(2rem)  高度为70px(2rem)的盒子.

媒体查询语法

*@media 后面带空格   width后是冒号 并不是等号  

既然一个媒体查询对应一个屏幕, 为了适配移动端那么多型号的屏幕,也需要很多媒体查询,一个一个写真的很不方便,所以现在通用的解决方案就是手淘开发出的 一个flexible.js文件,专门解决的就是移动端适配的问题,简介方便,导入js到项目中即可 ,其核心最底层原理就是构造函数使的可以监测屏幕的大小并随之对应的改变基础的页面跟字体大小.

注意* 目前导入flexible.js文件放到body标签结束的位置  并且前面机上script 标签 如图