css @media (max-width: 767px) { 767px 和 992px之间

<think>我们正在处理一个关于CSS媒体查询的问题，用户希望了解如何编写针对屏幕宽度在767px到992px之间的样式规则。 根据引用[1]和引用[2]，我们可以使用`@media`规则，结合`min-width`和`max-width`来设置这个范围。 具体语法为：`@media screen and (min-width: 767px) and (max-width: 992px) { ... }` 这表示当屏幕宽度大于等于767px且小于等于992px时，应用其中的样式。 另外，引用[3]提到移动优先和桌面优先的策略，这里我们使用介于两者之间的范围，所以直接使用`and`连接两个条件即可。 根据引用[4]的示例，我们也可以看到多个条件使用`and`连接。 因此，我们可以这样写： ```css @media screen and (min-width: 767px) and (max-width: 992px) { /* 在这里放置当屏幕宽度在767px到992px之间时应用的样式 */ } ``` 注意：这里我们使用了`screen`作为媒体类型，这是最常见的，表示用于屏幕设备。 现在，我们可以给用户一个清晰的回答，并生成相关问题。</think>### CSS媒体查询：屏幕宽度在767px至992px之间的样式规则 要在CSS中设置屏幕宽度介于767px和992px之间的样式规则，需使用`@media`规则结合`min-width`和`max-width`参数。语法如下： ```css @media screen and (min-width: 767px) and (max-width: 992px) { /* 在此处添加特定样式 */ .container { width: 90%; background-color: #f0f0f0; } .menu { display: flex; } } ``` #### 关键说明： 1. **媒体类型**：`screen`表示规则仅作用于屏幕设备（排除打印机等）[^1] 2. **逻辑连接**：`and`运算符连接两个条件，实现范围限定 3. **边界值**： - `min-width: 767px`：宽度≥767px时生效 - `max-width: 992px`：宽度≤992px时生效 4. **应用场景**：此范围通常适配平板设备或小尺寸桌面显示器[^3] #### 实际应用示例： ```html <style> .responsive-box { width: 100%; height: 200px; background: blue; } /* 767px-992px区间样式 */ @media screen and (min-width: 767px) and (max-width: 992px) { .responsive-box { background: red; /* 背景色变为红色 */ border-radius: 20px; /* 添加圆角 */ } } </style> ``` 当视口宽度在767-992px时，盒子将显示红色背景和圆角，其他宽度保持蓝色[^2]。 #### 开发建议： - 移动优先策略建议从`min-width`开始编写（小屏→大屏逐步添加样式）[^3] - 桌面优先策略则使用`max-width`（大屏→小屏逐步覆盖样式） - 测试时使用浏览器开发者工具（Ctrl+Shift+M）模拟不同设备尺寸