rem适配布局

基础
em为父元素的字体大小
rem是一个相对单位，相对于HTML元素来说的，例如：父元素为14px，子元素为2rem，则子元素为28px
rem可以通过修改HTML里面的文字大小，可以改变页面中元素的大小，用来整体控制
媒体查询：@Media Query 针对不同的屏幕尺寸设置不同的样式

• 语法：@media mediatype and not only （media feature）{
  css-code
  }
  2.查询类型（mediatype）
  all：用于所有设备
  print:用于打印机和打印预览
  scree：用于电脑屏幕，平板电脑，智能手机等
  3.关键字（and，not，only）
  and：将多个媒体连接到一起呀，相当于且的意思
  not：排除某个媒体类型，相当于非得意思，可以省略
  only：指定每个特定的媒体类型，可以省略
  （如果用width，min-width，max-width需要写在关键字后面，用小 括号括起来）
  4.改变背景颜色
  规则：按照从小到大或从大到小，（电脑屏幕大于320px，不再考虑）
  5.引入资源 （在屏幕缩小时，让一行元素变成按列显示）-针对不同的屏幕尺寸，调用不同的css文件
  语法：
  less
  css的预处理器：sass，less，stylus
  less使用
  先建立一个后缀名为less的文件
  1.less变量
  @变量名：值；
  不能包含特殊字符,不能以数字开头，大小写敏感
  
  错误命名示例：@1color ， @color~@#
  2.less编译
  需要把less文件编译成css文件
  在VS code中下载 Easy LESS插件，在less文件进行保存时会生成一个css插件
  
  3.less嵌套
  常用到的选择器的嵌套（子元素直接写在为父元素里面就行了）
  #header.logo{
  width:300px;
  }
  嵌套写法
  #header{
  logo{
  width:300px;
  }
  }
  伪元素，伪类选择器的写法（在less中的写法，需要在选择器前边加上&）
  &：hover{
  color：green；
  ’}
  &：：before{
  content：“”；
  }
  4.less运算
  提供了加减乘除运算
  5.rem+媒体查询+less技术 （或者flexible.js）
  元素大小取值方式：
• 最后的公式：页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）
• 屏幕宽度/划分的份数就是 html font-size的大小
• 或者：页面元素的rem值=页面元素值（px）/ html font-size 字体大小