响应式布局——媒体查询

媒体查询

CSS中的媒体查询是一种技术，用于根据不同的设备和屏幕尺寸应用不同的样式。通过使用媒体查询，可以为不同的设备和屏幕尺寸提供不同的样式，从而优化用户体验。

媒体查询的引入方法

1. 使用@media属性进行媒体查询：

   @media mediatype and (condition) {
     /* CSS rules go here */
   }

   • mediatype 表示媒体类型，可以是 all（所有媒体设备）、print（打印设备）、screen（计算机屏幕）等等。

   • condition 表示媒体特性，具体值如下：

     值	含义
     width	检测视口宽度。
     max-width	检测视口最大宽度。
     min-width	检测视口最小宽度。
     height	检测视口高度。
     max-height	检测视口最大高度。
     min-height	检测视口最小高度。
     device-width	检测设备屏幕的宽度。
     max-device-width	检测设备屏幕的最大宽度。
     min-device-width	检测设备屏幕的最小宽度。
     orientation	检测视口的旋转方向（是否横屏）。 1. portrait ：视口处于纵向，即高度大于等于宽度。 2. landscape ：视口处于横向，即宽度大于高度。

     完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

   • 运算符

     值	含义
     and	并且
     , 或 or	或
     not	否定
     only	肯定

     完整列表请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media

   • 常用阈值

     在实际开发中，会将屏幕划分成几个区间，例如：

     

   此外，媒体查询可以嵌套，以便为不同的屏幕尺寸和设备类型提供更加精细的样式：

   @media screen and (max-width: 480px) {
     /* CSS rules for small screens go here */
     @media (orientation: portrait) {
       /* CSS rules for portrait orientation go here */
     }
     @media (orientation: landscape) {
       /* CSS rules for landscape orientation go here */
     }
   }

2. 在<style>标签中使用媒体查询：

   <style media="mediatype and (condition)">
     /* 样式规则 */
   </style>

3. 在HTML文档中使用标签进行媒体查询：

   <link rel="stylesheet" media="(max-width: 768px)" href="small-screen.css">

   这样，在屏幕宽度小于等于768px时，就会加载small-screen.css样式表，从而应用相应的样式规则。

4. 使用@import规则引入带有媒体查询的样式表：

   @import url("small-screen.css") screen and (max-width: 768px);