响应式设计是现代网页设计中非常重要的一个方面，它可以让网页在不同的设备上呈现出最佳的布局和用户体验。而 CSS 媒体查询是实现响应式设计的关键所在。
媒体查询可以根据设备的屏幕尺寸、方向、分辨率等特征来应用不同的 CSS 样式。下面是一个简单的示例：
@media (max-width: 768px) {
/* 当屏幕宽度小于等于 768px 时应用以下 CSS 样式 */
body {
font-size: 14px;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* 当屏幕宽度在 769px 和 1024px 之间时应用以下 CSS 样式 */
body {
font-size: 16px;
}
}
@media (min-width: 1025px) {
/* 当屏幕宽度大于等于 1025px 时应用以下 CSS 样式 */
body {
font-size: 18px;
}
}在上面的代码中，我们定义了三个不同的媒体查询，每个媒体查询都包含一个条件和相应的 CSS 样式。当条件满足时，对应的 CSS 样式就会生效。
值得注意的是，媒体查询的条件可以是任意 CSS 属性，不仅仅是屏幕尺寸。比如，我们可以根据设备的方向来应用不同的样式：
@media (orientation: landscape) {
/* 当设备横屏时应用以下 CSS 样式 */
body {
background-color: green;
}
}
@media (orientation: portrait) {
/* 当设备竖屏时应用以下 CSS 样式 */
body {
background-color: blue;
}
}当多个 CSS 规则应用到同一个元素时，就会出现选择器优先级的问题。如果多个选择器具有相同的权重，则最后一个被定义的规则将会覆盖之前的规则。
选择器的优先级由四个因素决定，它们的权重从高到低依次为：
下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 优先级为 1, 选择器为 ID 选择器 */
#box {
background-color: red;
}
/* 优先级为 2, 选择器为类选择器 */
.box {
background-color: green;
}
/* 优先级为 3, 选择器为元素选择器 */
div {
background-color: blue;
}
</style>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>在上面的代码中，我们定义了三个不同的 CSS 规则，它们的优先级分别为 1、2 和 3。由于 #box 的优先级最高，所以它的背景色将覆盖其他两个规则的背景色。
为了避免选择器优先级的问题，我们可以使用以下方法：