CSS语言的@media查询
CSS中的@media查询是一种响应式设计的工具，它允许你根据不同的设备特征（如屏幕尺寸、屏幕分辨率、设备方向等）应用不同的样式规则。通过使用@media查询，你可以为不同的设备和视口大小创建定制化的样式表。
@media查询可以包含在CSS文件中，也可以作为内联样式或链接到外部样式表。它们通常用于创建自适应布局，以确保网站在不同设备上都能良好地显示。
基本语法：
css
复制
@media not|only mediatype and (expressions) { CSS-Code; }
not：是一个可选关键字，用来排除掉某些媒体类型。
only：也是一个可选关键字，用来指定某些样式只应用于符合查询条件的设备。
mediatype：指定媒体类型，如 screen（屏幕）、print（打印机）等。
expressions：是一系列的条件表达式，如 min-width、max-width、orientation（设备方向）等。
示例：
css
复制
/* 当屏幕宽度至少为768像素时应用这些样式 */ @media screen and (min-width: 768px) { .container { width: 750px; } } /* 当屏幕宽度最大为600像素时应用这些样式 */ @media screen and (max-width: 600px) { .navbar { display: none; } } /* 当设备方向为纵向时应用这些样式 */ @media screen and (orientation: portrait) { .portrait-only { display: block; } } /* 当使用打印机时应用这些样式 */ @media print { body { background-color: white; color: black; } }
在上述示例中，我们定义了几个@media查询，它们将根据屏幕宽度、设备方向和媒体类型（如打印媒体）应用不同的样式。例如，当屏幕宽度大于或等于768像素时，.container 类的宽度将被设置为750像素。当屏幕宽度小于或等于600像素时，.navbar 类的元素将不显示。
通过使用@media查询，你可以为不同的设备和视口条件创建细粒度的样式控制，从而实现更加灵活和响应式的网页设计。
