Media Queries 就是要在支援CSS3 的浏览器中才能正常工作，IE8 以下不支持。 而Media Queries 的套用方法千变万化，要套用在什么样的装置中，都可以自己来定义。
到底什么是Media Queries ？ 一般我们在开发HTML + CSS 网页中，都会有一份CSS 来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起，我们在开发网页只考虑到自己的萤幕显示的如何，是多么的肤浅哪。 So，在开发者的萤幕看到的网页或许很漂亮，那，其他人的萤幕呢？ 所以，我们需要的是能够控制不同大小的萤幕（装置），在其上所显示出来的样式，让各式各样来自不同地方的User 都能够有最佳的浏览体验。
在国外有一个网站专门搜集各式各样的Media Queries效果，网站名称就叫做「 Media Queries 」，网址：http://mediaqueri.es/ 。 进到该网站之后，你会看到每一列都有4 张网站的截图，从左开始是萤幕宽度较小的行动装置，一直到右边则是在传统PC 的较大萤幕上。 而在传统PC 中，会将许多元素并排；在手机中，会变成只有一行。
Media Queries 其实说简单也很简单，你可以只使用下面的几行CSS，再针对不同装置去设CSS 属性就好了。 这个段落将由浅入深，从最简单、最Easy、最没挑战性的使用宽度来玩。
Media Queries 有两种使用方法
- 在同一个CSS 档案中，用Media Queries @media 来判断使用者之萤幕宽度，选择载入哪一段CSS。
- 在HTML 的<link> 载入的地方，用media 属性判断使用者之装置/ 视窗宽度，选择载入哪一个CSS 档案。
以上两种则一即可，使用第一种的话要写好几遍<link> 标签，另一种要在同一个CSS 档案中写好几遍@media。效果相同，选择自己喜欢的方式即可。 （网路上的Framework 都是第1种，如Bootstrap。）
@media 用宽度( width ) 判断
下面的语法，是最常用到的Media Queries：（下方为同一档案之内容）
@media screen and (min-width: 1200px) { // 如果视窗宽度 >= 1200px，將会加载此 CSS。 } @media screen and (min-width: 768px) and (max-width: 979px) { // 如果视窗宽度介于 768px ~ 979px，将会载入此 CSS。 } @media screen and (max-width: 767px) { // 如果视窗宽度 <= 768px，将会载入此 CSS。 } @media screen and (max-device-width: 480px) { // 若视窗宽度 <= 480px，则载入此CSS。 }
在Media Queries 中，我们最常使用min-width 和max-width 来判断使用者的视窗宽度，而max-device-width 则是使用者「装置」的最大宽度。 width 和device-width 差在哪里？
- width : 因为浏览器可以自由调整宽度，所以这边指的是该浏览视窗的宽度。
- device-width : 就算你把浏览器视窗弄到符合最大(小)宽度，还是不会生效。 因为，device-width 指的是使用者的「装置」最大宽度，而不是浏览器视窗。 所以，device-width 常用在判断手机上。
所以，你也可以自己加上其他的条件下去。 要注意的是，每一个条件之间请用and 来分隔，并要适时加上括号以免错误。
min-width 是最小宽度；max-width 是最大宽度，可以用来表示一定的范围。
<link> 写在HTML 里头的判断
上一节的语法，你也可以把它个别拆成好几个档案，然后用HTML 的<link> 来载入并且判断。 下面为HTML 代码：
<link rel=”stylesheet” type=”text/css” href=”all.css” media=”screen”> <link rel=”stylesheet” type=”text/css” href=”a.css” media=”screen and (max-width: 767px)”> <link rel=”stylesheet” type=”text/css” href=”b.css” media=”screen and (min-width: 768px) and (max-width: 979px)”> <link rel=”stylesheet” type=”text/css” href=”c.css” media=”screen and (min-width: 1200px)”> <link rel=”stylesheet” type=”text/css” href=”d.css” media=”screen and (max-device-width: 480px)”>
我们就可以用link 中的media 属性来判断使用者的视窗/ 装置宽度，如上。 之后，在每一个css 档案中你就可以写若使用者宽度符合条件的CSS 。 如a.css 中，就是要写如果使用者之视窗宽度<= 768px，要再载入的CSS。
注意事项
在Media Queries 中的CSS，其效果是覆盖原本预设的CSS。 所以，你要先有一份完整的CSS，再使用Medai Queries，对细部元素做调整。 所以，绝对不是把全部的CSS 复制一遍到Media Queries 中再修改喔！
Viewport
如果网页没有做Responsive Web Design 的话，手机的浏览器会自动假装解析度变很大，会让网页完整显示。 但是，这就让字变得很小，使用者还要去做放大而不能直接阅读。 而这个meta 标签是为了防止这样的情形发生( iphone 据说会有此情形)，让网页显示的宽度就直接是装置的宽度，不会把网页硬塞。 这段只要加在HTML 的<head> 里头即可。
<meta name=”viewport” content=”width=device-width; initial-scale=1.0″ />
针对某装置下去做设定、快速使用: Media Query Snippets
Media Query Snippets这个网站搜集了很多行动装置的@media条件式，你可以直接复制来使用。 如下图，有一堆的装置你可以拿去设定：（网址： http://nmsdvid.com/snippets/ ）
另外，其实你不太需要去对每个装置都去做调整，基本上使用行动装置的max-device-width: 480px ，就绰绰有余了。 上面的网站，是帮你做个整理，以便不时之需。
IE8 Hack
目前在网路上有人制作了让不支援Media Queries 的浏览器透过Javascript 的方式也能支援。 而目前这个似乎还是有点小问题，实际能不能使用请直接至该网站查询：
css3-mediaqueries-js – a library that aims to add media query support to non-supporting browsers
动手吧
另外，目前网路上也有支援Media Queries 的Framework，如Bootstrap 等等。 Bootstrap 已经帮你把很多版面在不同装置的显示效果设定好，或许你也可以试试看使用这个不错又简单的Framework，Bootstrap 。 如果你使用了Bootstrap，还是不代表这篇对你没有需要，因为像Bootstrap只有对格局、图片做变动，而细节的部份，你还是得使用media queries，才能把整个Responsive Web Design做到最好。
事实上，Media Queries 只是让你能够在不同装置上做调整，至于调整的好看不好看，就得看大家的CSS 造化如何了，加油！
相关推荐
下面将详细介绍如何使用CSS3 Media Queries为网站创建手机版版本。 #### CSS3 Media Queries概述 CSS3 Media Queries是CSS3的一个特性，它允许开发者根据不同的条件（如屏幕宽度、分辨率等）来应用特定的CSS样式。...
**CSS3 Media Queries详解** CSS3 Media Queries是Web开发中的一个重要工具，它允许开发者根据设备的物理特性，如视口宽度、设备像素比等，来应用不同的样式规则。这一功能使得响应式网页设计成为可能，使得网站能...
在 CSS2 时代，如果你曾经为你的网站设计过打印版 CSS，就会明白 CSS3 Media Queries 的作用，不过，CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用，事实上，CSS2 的 Media Type 并不曾被多少设备所支持过。...
在CSS3中，Media Queries使用语法允许将多个查询以逻辑“and”连接，构成复杂的媒体查询条件。此外，Media Queries还引入了“not”和“only”两个逻辑操作符，它们可以用来排除特定媒体类型或者仅对支持Media ...
标题“CSS3 Media Query在IE9及更早版本的解决方法”所涉及的关键知识点是CSS3的媒体查询（Media Queries）以及如何在不支持媒体查询的旧版Internet Explorer（特别是IE9及以下版本）中实现兼容性。CSS3媒体查询是...
CSS媒体查询（Media Queries）是CSS中用于定义不同设备或屏幕环境下样式规则的关键技术。它允许开发者根据设备特性，如屏幕尺寸、分辨率、颜色深度等，动态调整网页的布局和样式，实现响应式设计。 在CSS2中，媒体...
在本文档中，我们探讨了如何使用JavaScript结合CSS媒体查询（Media Queries）来检测用户的浏览设备类型。这种方法允许开发者根据设备的屏幕尺寸和特性来调整网页的布局和交互，实现响应式设计。以下是对该技术的详细...
在网页设计领域，CSS3 Media Queries是现代网页布局的关键特性，它允许我们根据设备特性，如屏幕尺寸、分辨率和方向，来应用不同的样式。然而，不幸的是，Internet Explorer 8（IE8）及其更低版本并不支持这个功能。...
CSS3中的Media Queries（媒体查询）是前端开发中用于实现响应式网页设计的关键技术之一。响应式设计是指网页能够根据不同的屏幕尺寸和设备特性（如分辨率、宽高比等）来自动调整其布局和展示内容，以提供良好的用户...
### 彻底弄明白CSS3：深入理解Media Queries #### CSS3 Media Queries概述 ...通过以上方法，设计师可以有效地利用CSS3 Media Queries来创建响应式的网页设计，提升用户体验，适应移动时代的潮流。
CSS3 Media Queries是实现这一目标的关键工具。通过Media Queries，我们可以根据设备特性，如视口宽度、设备像素比等，来定义不同的样式规则，从而让网站在手机、平板电脑和桌面电脑上都能呈现出最佳的布局和视觉...
CSS3媒体查询（Media Queries）是现代网页设计中用于响应式设计的关键技术之一。它们允许开发者根据不同的设备特性以及设备状态应用特定的CSS样式规则。媒体查询通过检测设备的屏幕尺寸、分辨率、方向、颜色深度等...
本篇文章将对CSS3中的Media Queries的使用方法进行详细介绍。 首先，Media Queries的基础语法是在@media规则内指定媒体类型和媒体特性。媒体类型定义了输出设备的类别，例如屏幕（screen）、打印机（print）或是...
6. **响应式设计**：媒体查询（media queries）是CSS3响应式设计的关键，可以根据设备特性（如屏幕宽度、分辨率等）应用不同的样式，实现跨设备兼容。 7. **动画与过渡**：CSS3的transition属性可实现元素状态改变...
CSS3 Media Queries是响应式网页设计中不可或缺的技术之一，它允许开发者根据不同的媒体类型以及媒体特征来应用不同的样式表。通过使用Media Queries，可以检测设备的特征，如屏幕分辨率、屏幕宽度、高度等，并根据...
"05 CSS3.0中文参考手册（飘零雾雨版）.chm"、"03 CSS 中文参考手册（飘零雾雨办）.chm"、"08 CSS 3.0参考手册.chm"、"07 CSS3.0（腾讯ISD版）...手册3.0.chm"、"09 CSS完全参考手册3.0.chw"都详细介绍了CSS3的各种功能...
本篇文章将深入探讨如何使用CSS3媒体查询（Media Queries）和jQuery来实现一个响应式导航，特别是在屏幕宽度变化时，导航栏会进行相应的布局调整。 首先，我们了解CSS3媒体查询（Media Queries）的概念。媒体查询是...
下面将详细解释媒体查询的使用方法，并通过实例进行演示。 首先，媒体查询的基本语法包含一个媒体类型和一个或多个表达式，用于检查设备的特定特性。例如： ```css @media media-type and (media-feature) { /* ...