rem布局

rem基础

rem是一个相对单位，类似于em。em是相对父元素来说的。
如果父元素font-size为10px, 子元素设置2em为20px。
不同的是rem是相对于html根元素字体大小。如html设置字体大小为24px , 设置元素字体为2rem,字体为48px

@media查询

media查询可以针对不同的屏幕尺寸设置不同的样式

media三个参数

@media mediatype and/not/only （media feature）

mediatype 媒体类型
and/not/only 关键字 （and将多个媒体设备连接在一起，有且的意思，not排除某个媒体类型，有非的意思，only指定媒体类型，可以省略）
media feature 媒体特性 必须小括号包含（1.width:输出页面中页面可见区域宽度，2.min-width:输出页面中最小页面可见宽度3.max-width:输出页面中最大页面可见宽度

    @media screen and (max-width: 800px) {
      body {
        background-color: orange;
      }
    }

当最大宽度小于等于800时，body变为橘色

media查询和rem结合

    @media screen and (min-width: 320px) {
      html {
        font-size: 100px;
      }
    }
    @media screen and (min-width: 640px) {
      html {
        font-size: 200px;
      }
    }
    
    @media screen and (min-width: 940px) {
      html {
        font-size: 300px;
      }
    }

从小到大实现屏幕变化实现宽高变化

media查询引用不同的样式文件

<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)"

less使用

less是css的一种处理语言， CSS预处理器

• List item