前端 CSS 面试题, 说说你对媒体查询的理解?

Step 1

Q:: 面试题: 说说你对媒体查询的理解？

A:: 媒体查询（Media Query）是一种 CSS 技术，允许开发者根据设备的特性（如屏幕宽度、高度、分辨率、方向等）应用不同的样式。它是响应式设计的核心部分，使得同一页面在不同设备上都有良好的显示效果。媒体查询通过 @media 规则来定义，可以与逻辑运算符（如 and、not、only 等）结合使用，以实现复杂的条件判断。

Step 2

Q:: 面试题: 如何在 CSS 中使用媒体查询？

A:: 在 CSS 中，媒体查询通常使用 @media 规则。例如，针对宽度小于 600px 的设备，样式可以这样写：

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

Step 3

Q:: 面试题: 解释视口（viewport）和媒体查询的关系。

A:: 视口是指设备屏幕上显示内容的可视区域。媒体查询通常根据视口的宽度和高度来应用不同的样式。因此，在响应式设计中，首先设置正确的视口（通常在 HTML 中用 <meta name="viewport" content="width=device-width, initial-scale=1.0">）是非常重要的。

Step 4

Q:: 面试题: 媒体查询中的逻辑运算符是如何工作的？

A:: 媒体查询支持使用逻辑运算符，如 and、not 和 only。 - and：用来组合多个条件，如 @media (min-width: 500px) and (max-width: 800px)。 - not：用来排除某个条件，如 @media not all and (min-width: 500px)。 - only：用来确保媒体查询仅适用于特定媒体类型，如 @media only screen and (max-width: 800px)。

Step 5

Q:: 面试题: 如何利用媒体查询实现移动优先的设计？

A:: 移动优先的设计是指首先针对移动设备编写样式，然后通过媒体查询为更大屏幕（如平板和桌面）添加样式。通常的做法是：

1. 先为小屏幕（如移动设备）编写默认样式。 2. 然后使用媒体查询为较大屏幕的设备添加特定样式。

例如：

 
body {
  font-size: 14px;
}
@media (min-width: 600px) {
  body {
    font-size: 16px;
  }
}