【前端知识之CSS】响应式设计

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍响应式设计的知识。

---

一、媒体查询

1. 媒体查询（Media Query）是CSS3新语法：使用@media查询可以针对不同的媒体类型定义不同的样式；@media可以针对不同的屏幕尺寸设置的样式。

2. 语法规范：
   
   （1）用@media开头；（2）mediatype媒体类型；（3）关键字 and not only；（4）media feature媒体特性 必须有小括号

3. mediatype媒体类型

值	解释说明
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等

4. 关键字 and not only
5. 媒体特性
   |值|解释说明|
   |–|–|
   | width | 定义输出设备中页面可见区域的宽度 |
   | mini-width | 定义输出设备中页面最小可见区域的宽度 |
   | screen| 定义输出设备中页面最大可见区域的宽度 |

/* 在屏幕上并且最大的宽度是800px 设置想要的样式 */
@media screen and (max-width:800px) {
    body {
        background-color: pink;
    }
}

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

二、响应式设计

1. 响应式尺寸划分：
   超小屏幕：100%;
   小屏幕：750px;
   中等屏幕：970px;
   大屏幕：1170px。

2. vw和vh：vw表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一。

3. rem:rem相对于根元素font-size的属性。

三、总结

1. 优点：对不同分辨率的设备灵活性强；能够快捷解决多设备显示的适应问题。
2. 缺点：仅适用与布局不复杂的部门类型网站；效率低下。