CSS | @media 规则

CSS中的@media规则允许您根据不同的设备类型或视口尺寸应用不同的样式。通过@meida规则，您可以创建响应式布局和设计，以确保您的网站可以适应不同的屏幕大小和设备类型。

语法

@media mediatype (条件) {
    // 样式规则
}

媒体类型

媒体查询允许您指定不同的媒体类型来触发样式规则。以下是一些常见的媒体类型：

• all: 所有设备
• print: 打印机和打印预览
• screen: 电脑屏幕和其他光电设备，如平板电脑和智能手机
• speech: 屏幕阅读器和语音合成器

媒体查询条件

媒体查询条件决定了何时收到不同的样式规则。您可以根据以下条件指定不同的样式规则：

• width: 设备或浏览器的宽度
• height: 设备或浏览器的高度
• orientation: 设备的方向（纵向或横向）
• resolution: 设备或屏幕的像素密度
• aspect-ratio: 设备或浏览器的纵横比

以下是一些常见的媒体查询条件及其示例值：

• max-width: 800px; // 当设备或浏览器的宽度小于或等于800px时触发
• min-height: 600px; // 当设备或浏览器的高度大于或等于600px时触发
• orientation: landscape; // 当设备横向时触发
• min-resolution: 300dpi; // 当设备的像素密度大于或等于300dpi时触发
• aspect-ratio: 16/9; // 当设备的纵横比为16:9时触发

示例

以下是一个响应式布局的示例，当浏览器宽度小于800px时，将导航栏放在侧边栏中：

@media (max-width: 800px) {
  #nav {
    float: none;
    width: 100%;
  }
  
  #sidebar {
    display: none;
  }
}

总结

@media规则是CSS中的一项非常有用的功能，可以让您根据不同的设备类型和浏览器尺寸应用不同的样式。了解媒体类型和媒体查询条件将帮助您创建响应式和易于使用的网站。