【前端面试必知】响应式设计

前言

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

文章目录 前言一、媒体查询二、响应式设计三、总结

---

一、媒体查询

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

语法规范：

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

mediatype媒体类型

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

关键字 and not only媒体特性
|值|解释说明|
|–|–|
| 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;
    }
}

二、响应式设计

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

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

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

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