如何使用 Media Query 定位桌面、平板电脑和移动设备？

媒体查询是一种流行的技术，它能够将样式表传送到分别具有不同屏幕尺寸和分辨率的不同设备。它们用于在多个设备上自定义网站的外观。媒体查询由一种媒体类型组成，该媒体类型可以包含一个或多个表达式，这些表达式可以是 true 也可以是 false。如果指定的媒体与显示文档的设备类型匹配，则查询结果为真。如果媒体查询为真，则应用样式表。

下面列出了不同设备的屏幕分辨率：

• 移动（智能手机）最大宽度：480px
• 低分辨率平板电脑和 ipad 最大宽度：767 像素
• 平板电脑 Ipads 纵向模式 max-width:1024px
• 桌面最大宽度：1280px
• 超大尺寸（大屏幕）最大宽度：1281px 及更大

句法：

@media( media feature ) {
    // CSS Property
}

当某个条件为真时，它使用@media 规则来包含一个 CSS 属性块。某些媒体特征是宽度（最大宽度和最小宽度）、纵横比、分辨率、方向等。

例子：

      

    
      
    

  

    
GeeksforGeeks
    
Media Query

  
                    

输出：

• 移动设备上的输出：
  
• 在低分辨率平板电脑、Ipad 上输出：
  
• 平板电脑 Ipads 纵向模式上的输出：
  
• 笔记本电脑和台式机上的输出：
  
• 大屏幕输出：
  

注意：更改屏幕大小以查看媒体查询效果。

支持的浏览器： Media Query支持的浏览器如下：

• 谷歌浏览器 21.0
• 浏览器 9.0
• 火狐浏览器 3.5
• Safari 4.0
• 歌剧 9.0