在 web 开发中，我们经常需要针对不同的设备或屏幕尺寸来设置不同的样式。这时就可以使用 CSS 属性 @media 来实现响应式设计。@media 可以根据不同的媒体查询条件来应用不同的样式规则。
媒体查询条件
媒体查询条件可以包括以下内容：
- 媒体类型：如 screen、print、speech 等。
- 媒体功能：如 width、height、orientation、aspect-ratio 等。
使用方法
@media 的语法如下：
------ --------- --- ------ -------- -
-- --- -- --
-示例代码：
------ ------ --- ----------- ------ -
---- -
---------- -----
-
-上面的代码表示当屏幕宽度大于等于 768px 时，应用这个样式规则。
常用媒体查询条件
- width：屏幕宽度。
- height：屏幕高度。
- orientation：屏幕方向，如 portrait 或 landscape。
- aspect-ratio：屏幕宽高比。
- color：颜色位数。
- resolution：屏幕分辨率。
媒体查询组合
可以组合多个媒体查询条件，并使用逻辑运算符 and、not、only、or 来连接。
示例代码：
------ ------ --- ----------- ------ --- ------------- ---------- -
---- -
----------------- --------
-
-上面的代码表示在屏幕宽度大于等于 768px 且屏幕为横向时应用这个样式规则。
@media 属性可以帮助我们在不同的设备上提供更好的用户体验，让网页能够适应不同的屏幕尺寸和设备类型。