移动端适配rem知识点及媒体查询

基础

rem(root em)是一个相对单位，基准是html元素字体大小；

em也是一个相对单位，基准是 父级元素的字体大小

优点：可以通过更改页面中html字体大小来更改页面中元素大小，从而实现整体控制

媒体查询：media Query 是CSS3新增语法，可以针对不同尺寸屏幕更改样式

语法规范

@media mediatype and | not | only (media feature){csscode}

@media screen and (max-width: 360px;){
            html{
                font-size: 20px;
            }
        }

• media feature 条件建议 从小到大

利用媒体查询引入资源

当样式繁多的时候，可以针对不同媒体设置不同的样式表；
原理：直接在link 中判断媒体尺寸，引入不同的css文件

  <link rel="stylesheet" href="index1.css" media="screen and (max-width:900px)">
  <link rel="stylesheet" href="index2.css" media="screen and (min-width:360px)">