1.meta标签viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

2.Media 媒体查询

媒体类型

all（全部）、screen（屏幕）和 print（页面打印或打印预览模式）

使用方式

1. link标签

   link标签引入媒体类型其实就是在link标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型，比如：

 <link rel="stylesheet" href="index.css" media="screen">
 <link rel="stylesheet" href="demo.css" media="print">

2. @import 在样式文件中引入媒体类型：

  @import url('./index.css') screen;

在style标签中引入媒体类型:

<style>
    @import url('./index.css') screen;
</style>

3. @meida 方式 @media是CSS3中新引进的一个特性，叫媒体查询。@media引入媒体同样也有两种方式，如下：

在样式文件中引入媒体类型：

  @media screen {
      /*具体样式*/
  }

在style标签中引入媒体类型:

<style>
    @media screen {
      /*具体样式*/
  }
</style>

代码

/* 随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式 */
/* 移动端优先使用min-width */
/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue;
    }
}
/* ipad */
@media screen and (min-width: 768px) {
    body {
      background-color: green;
    }
}
/* PC端优先使用max-width */
/* pc width > 1024px */
    body {
        background-color: yellow;
    }
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
        background-color: #FF00FF;
    }
}

3.百分比布局

• border-radius, translate 的百分比，是相对于自身
• padding, marigin 的百分比，不论垂直方向还是水平方向，相对于直接父元素的width
• height, width; top, bottom; left, right，都是相对于直接父元素

缺点

各属性使用百分比，相对父元素的属性并不是唯一的。导致百分比布局很复杂。

4.rem布局

em 和 rem 是什么

• em: 相对于父级元素的字体大小
• rem: 使用rem为元素设定字体大小时，指的是相对于HTML根元素的字体大小。  

rem 布局的要点

1. 根元素的 font-size 提供了一个基准，其他元素以 rem 为固定单位定义大小。
2. 需要根据视图容器的大小，动态的改变根元素 font-size，其他元素也会发生响应式的变化。
3. 在CSS样式之前要写一段JS代码，动态控制根元素 font-size 的大小。

代码 

添加resize事件监听，回调函数可以改变rem的大小

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);

利用媒体查询，以rem为单位设置不同尺寸设备下的字体大小

/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem;
    }
}

5.视口单位

单位	含义
vw	相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw
vh	相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh
vmin	vw和vh中的较小值
vmax	vw和vh中的较大值

使用 vw 作为 CSS 单位

6.Flex弹性布局

7.Grid网格布局