em

• em是一个单位
• em是相对于父元素字体大小来定义子元素的宽和高

rem（root em）

• rem是一个单位
• 是一个相对单位，类似于em
• 不同的是rem是基于 html字体大小来定义元素的宽和高
• 优点

  可以通过修改html的font-size大小来改变页面的元素大小,达到整体控制

媒体查询(media)

• 媒体查询可以根据不同屏幕尺寸改变不同的样式
• 格式

@media

• 可以针对不同的媒体类型定义不同的样式

  当重置浏览器大小过程中，页面也会根据浏览器的宽度和高度重新渲染页面
  目前针对很多苹果和安卓的设备，大多都用到媒体查询

• 语法概览

  @media mediatype and | not | only (media feature){
      csss-code;
  }
  # mediatype 媒体类型 
      # all 用于所有设备
      # print 用于打印机设备和打印预览
      # screen 用于电脑屏幕，平板，手机等
  # 关键字
      # and 可以将多个媒体特性连接到一起作为媒体查询的条件
      # not 排除某个特定的类型，相当于非
      # only 指的是某个特定的媒体类型 
  # media feature 媒体特性（必须有小括号包含）
      # 例如
      # width 定义输出设备中页面可见区域的宽度
      # min-width 定义输出设备中页面最小可见区域宽度
      # max-width 定义输出设备中页面最大可见区域宽度
      # 和高度等

适配布局

• 因为rem单位是跟着html字体大小来走的，所以，可以通过 媒体查询和rem来做适配布局
• 媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

媒体查询-引入资源

• 当样式比较繁多的时候，我们可以针对不同的媒体使用不同的css样式表
• 原理

  直接在link中判断设备的尺寸，然后引用不同的css文件

• 语法规范

  <link rel="stylesheet" meida="mediatype and | not | noly (media feature) href="mystylesheet.css"
  
  # 举例
  <link rel="stylesheet" href="要引入的css的样式地址" media="screen and (min-width:320px) and (max-width: 639px)">
  
  # 意思是 当 页面的宽度大于320px 小于 639px时，就引入这个样式，

less基础

• css的弊端

• css是非程序语言，没有变量，函数，和作用域等概念

• css需要书写大量的看似没有逻辑的代码，冗余度高

• 非前端工程师来讲，往往缺少css编写经验，很难写出组织良好，而且易于维护的css代码

• less介绍

• less是一门css扩展语言，也称为css预处理区

• 作为css的一种形式的扩展，它没有减少css的功能，而是在css的语法上，为css加入程序语言的特性

• 在css语法基础上，引入了变量，mixin(混入) 运算以及函数等功能，大大的简化了css的编写

• 降低了css的维护成本，less可以让我们用更少的代码做更多的事情

• less安装
  npm install -g less
lessc -v 查看版本号

• less的使用

• 新建一个后缀名为.less为文件在less文件中书写less语句

• 变量的定义

  没有固定的值，可以开边的

• 语法:
  @变量名:值

• 命名规范
  >1.必须以@为前缀
  >2.不能包含特殊字符
  >3.不能以数字开头
  >4.大小写敏感

• less编译

• 可以通过vscod less插件(easyless)安装后，只要保存less文件就会自动生成css文件

• less嵌套

• 如果遇到(交集|伪类|伪元素选择器)

• 内层选择器的前面没有&符号，则它就会被分析为父选择器的后代

• 内层选择器的前面有&符号，则它就会被分析为父元素自身或者父元素的伪类

• 如果遇到特殊的选择器就在前面添加&符号 (交集|伪类|伪元素选择器)

  例子
  # 这是一个less的样式
  .nav{
      // 在nav父元素中写.logo子元素
      .logo{
          color: green;
      }
  
      // 给nav添加before伪元素
      &::before{
          content: 'kml';
      }
  }
  
  # 父元素 .nav 子元素 .logo
  # 这里.logo直接在.nav里面写就可以了而before元素需要加&才可以

• less运算

• 运算就是运算，1+1这种

• 在less中，然和数字，颜色或者变量都可以参与运算

  例子
  # 这是一个less文件样式
  
  # 先定义变量
  @border:5px + 5;
  @baseFont:50px;
  # 写css样式
  div{
      # 计算 宽度 
      width: 200px - 50;
      height: (200px + 50) * 2;
      # 这里边框是 给的变量
      border: @border solid red;
      background-color: pink;
  }

rem适配方案

• 让一些不能等比例适应的元素，达到当设备储存发生改变时，等比例适配当前设备

• 可以使用媒体查询，根据补鞥呢设备按比例设置html字体大小，然后页面元素，使用rem做尺寸单位，当html字体发生变化，元素尺寸也会发生变化，从而达到等比例缩放适配

实际开发适配方案

• 按照设计稿与设备宽度的比例，用媒体查询动态计算并设置html跟标签的font-size大小

• 然后将 css样式中盒子的宽和高等值转换成rem值即可

• rem = px / html_font-size

可以采用 less + 媒体查询 + rem 或者 淘宝的flexible.js + rem

• 设计稿常见的尺寸宽度(手机)

  苹果 4 5 640px
  苹果 6 7 8 750px
  安卓 320px 360px 375px 384px 400px 414px 500px 720px
  大部分都是720px的

• 一般情况下用一套或者两套效果图适应大部分屏幕，放弃极端屏，对其优雅降级，牺牲一些效果，现在已750px为准

元素的取值方法

• 公式
  页面元素的rem值 = 页面元素值(px) / (屏幕的宽度 / 划分的份数)

  划分的分数就是html的font-size大小