随着移动设备的普及，越来越多的网站需要适配不同的屏幕尺寸和分辨率。而响应式设计（Responsive Web Design）正是解决这个问题的一种有效方式。在本文中，我们将介绍如何使用 CSS media queries 构建响应式设计。
什么是 CSS media queries？
CSS media queries 是一种 CSS3 的新特性，它允许我们根据设备的特性（如屏幕尺寸、分辨率、方向等）来应用不同的 CSS 样式。通过使用 CSS media queries，我们可以针对不同的设备，提供不同的布局和样式，从而实现响应式设计。
如何使用 CSS media queries？
在 CSS 中，我们可以使用 @media 规则来定义一个媒体查询。@media 规则包含一个媒体类型和一个或多个限制条件，当这些限制条件满足时，其中的 CSS 样式将被应用。
下面是一个简单的示例：
@media screen and (max-width: 768px) {
/* 在屏幕宽度小于 768px 时应用这些样式 */
body {
font-size: 16px;
}
}在这个示例中，我们使用 @media 规则来定义一个针对屏幕媒体类型，且屏幕宽度小于 768px 的媒体查询。当这个媒体查询被满足时（即在屏幕宽度小于 768px 时），其中的 CSS 样式将被应用，这里我们将 body 元素的字体大小设置为 16px。
媒体类型和限制条件
在使用 CSS media queries 时，我们需要指定一个媒体类型和一个或多个限制条件。下面是常见的媒体类型和限制条件：
媒体类型
- all：所有设备
- screen：电脑、平板、智能手机等屏幕设备
- print：打印机和打印预览模式
- speech：屏幕阅读器等语音合成设备
限制条件
- width：屏幕宽度
- height：屏幕高度
- device-width：设备屏幕宽度
- device-height：设备屏幕高度
- orientation：设备方向（横向或纵向）
- aspect-ratio：屏幕宽高比
- color：颜色位数
- resolution：屏幕分辨率
示例代码
下面是一个简单的响应式设计示例，它将在不同的屏幕尺寸下显示不同的布局和样式：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
-- ---- --
---- -
---------- -----
-
------ -
----------------- -----
------ -----
-------- -----
----------- -------
-
---------- -
------ ------
------- - -----
-
-------- -
------ -----
------ ----
-
-------- -
------ ------
------ ----
-
------ -
----------- -------
-------- -----
----------------- --------
----------- --- ----- -----
-
-- ---- --
------ ------ --- ----------- ------ -
---------- -
------ -----
-
--------- -------- -
------ -----
------ -----
-
-
------ ------ --- ----------- ------ -
---- -
---------- -----
-
------ -
-------- -----
-
------ -
-------- -----
-
-
--------
-------
------
--------
----------------
---------
---- ------------------
---- ----------------
-------------
-----------------------------------------
------
---- ----------------
------------
-----------------------------------------
------
------
--------
- ---- -------
---------
-------
-------在这个示例中，我们使用了两个 @media 规则来定义不同的媒体查询。当屏幕宽度小于 960px 时，我们将容器宽度设置为 100%，并将内容和侧边栏的宽度设为 100%。当屏幕宽度小于 768px 时，我们将字体大小、页眉和页脚的内边距设置为 10px。
总结
CSS media queries 是一种非常实用的 CSS3 特性，它可以帮助我们构建响应式设计，从而适配不同的设备。在使用 CSS media queries 时，我们需要指定媒体类型和限制条件，并针对不同的设备提供不同的布局和样式。希望本文能够帮助你更好地了解和使用 CSS media queries。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65eee30e2b3ccec22f7ced5f