1.rem布局的优缺点
rem本质是等比缩放。子元素尺寸设置rem单位，通过更改html元素的字体大小，就可以让子元素实际大小发生变化。
缺点：
- pc页面来讲使用次数不多，一般移动端可能会用；全适配方案可以使用媒体查询
@media - 数据量大：所有的图片，盒子都需要我们去给一个准确的值，才能保证不同机型的适配
2.常用的响应式布局有哪些方法
首先，在网页代码的头部，需要加入加入一行viewport元标签。作用为：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
<meta name="viewport" content="width=device-width, initial-scale=1" />css样式响应式的一些方法：
- 使用一些响应式单位如：em，rem，vw，vh，vmin，vmax，ch （小程序rpx）
- 尺寸使用百分比。
- 使用
@media媒体查询。 - 使用
max-width和max-width等限制元素尺寸。 - 使用flex弹性布局。
3.常用的响应式单位有哪些
%父元素尺寸的百分比为当前元素尺寸em优先根据自身的字体大小，如果没有就向上寻找最近父元素有设置字体大小来换算的倍数尺寸rem根元素（html元素或:root元素）设置的字体大小的倍数尺寸ch相对于数字0的大小。1ch就是数字 0 的宽度vw相对于视口(浏览器可视区域)的宽度，视口宽度会被均分为100单位，则1vw等于视口宽度的1%vh相对于视口的高度，视口高度会被均分为100单位，则1vh等于视口高度的1%vmin选取vw和vh中最小的那个均分为100单位来换算vmax选取vw和vh中最大的那个均分为100单位来换算
4.媒体查询的使用方式有哪些
① 直接在css中编写
@media 类型 and (条件1) and (条件二){
css样式
}
//例：
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}② 使用@import导入
@import url("css/moxie.css") all and (max-width:980px);③ 也是最常用的：使用link连接，media属性用于设置查询方式：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" type="text/css" href="mystylesheet.css">
<!-- 例子 -->
<link rel="stylesheet" media="screen and (min-width: 600px) and (max-width: 800px)" type="text/css" href="style.css">本文固定连接：https://code.zuifengyun.com/2017/11/3424.html，转载须征得作者授权。