CSS3 Media Queries 详细介绍与使用方法，Responsive Web Design 必备技术

标签： css3 media queries | 发表时间：2013-11-08 06:09 | 作者：天梯梦
出处：http://www.iteye.com

上一篇我们介绍了 Responsive Web Design之后，这次要来详细介绍CSS3 Media Queries了。 在上一篇中，我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成。 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作，IE8 以下不支援。 而Media Queries 的套用方法千变万化，要套用在什么样的装置中，都可以自己来定义。

 

关于Media Queries

到底什么是Media Queries ？ 一般我们在开发HTML + CSS 网页中，都会有一份CSS 来控制网页的样式表。 而随着各式各样不同大小、长宽与解析度的装置的兴起，我们在开发网页只考虑到自己的萤幕显示的如何，是多么的肤浅哪。 So，在开发者的萤幕看到的网页或许很漂亮，那，其他人的萤幕呢？ 所以，我们需要的是能够控制不同大小的萤幕（装置），在其上所显示出来的样式，让各式各样来自不同地方的User 都能够有最佳的浏览体验。

较佳的开发步骤：

  1. 先写一份在你的萤幕显示OK 的CSS 样式。
  2. 开始使用Media Queries 在不同装置上做调整。

你可以先看例子

在国外有一个网站专门搜集各式各样的Media Queries效果，网站名称就叫做「 Media Queries 」，网址： http://mediaqueri.es/ 。 进到该网站之后，你会看到每一列都有4 张网站的截图，从左开始是萤幕宽度较小的行动装置，一直到右边则是在传统PC 的较大萤幕上。 而在传统PC 中，会将许多元素并排；在手机中，会变成只有一行。

 

Media Queries 怎么写

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：（下方为同一档案之内容）

//全部的使用者都會載入這裡的 CSS。
 
@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/ ）

1

另外，其实你不太需要去对每个装置都去做调整，基本上使用行动装置的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做到最好。

（Bootstrap官网： http://twitter.github.com/bootstrap/ ；本站教学介绍： http://fundesigner.net/twitter-bootstrap/ ）

事实上，Media Queries 只是让你能够在不同装置上做调整，至于调整的好看不好看，就得看大家的CSS 造化如何了，加油！

 

 

来源： 乐在设计 > CSS3 Media Queries 詳細介紹與使用方法，Responsive Web Design 必備技術



已有 0 人发表留言，猛击->> 这里<<-参与讨论


ITeye推荐



相关 [css3 media queries] 推荐：

HTML5实践 -- CSS3 Media Queries

- - 博客园_首页
　　转载请注明原创地址： http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html. 　　demo查看地址： http://www.webdesignerwall.com/demo/media-queries/. 　　CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机.

CSS3 Media Queries的些野史外传

- BeerBubble - 张鑫旭-鑫空间-鑫生活
本文地址：http://www.zhangxinxu.com/wordpress/?p=1049. //zxx:本文是去年2010年，也就是去年8月24号一篇写了一半的草稿，正好时隔1年. 一、关于Media Queries这货. 去年我在制作“CSS3中文在线指南”时第一次见到该属性，当时的兴奋劲堪比路飞看到肉（最近在看海贼王），原来世界上竟有这等CSS属性，因为当时很多精力用在思考自适应布局与宽屏显示器下的页面布局，见此属性立马让我眼前一亮，青春绽放.

伪类+js实现CSS3 media queries跨界准确判断

- - 张鑫旭-鑫空间-鑫生活
本文地址： http://www.zhangxinxu.com/wordpress/?p=2387. 我们都知道，CSS3 media queries是 响应布局实现之利器. 国外很多著名的前端站点，如 css-tricks, smashingmagazinegazine等都采用了响应布局.

CSS3 Media Queries在iPhone4和iPad上的运用

- - Web前端 - ITeye博客
那么以后大家在iPhone4和iPad设备上，就可以按照横竖板来定样式了：. 上面四种CSS3 Media Queries就是用来对付iPhone4和iPad的，至于其他的运用，大家参考下面我重新整理的CSS3 Media Queries模板：. CSS3 Media Queries 模板：. 1、Smartphones (竖板和横板).

CSS Media Queries 模板

- - blog.moocss.com
CSS Media Queries 模板. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60.

CSS3 Media Queries 详细介绍与使用方法，Responsive Web Design 必备技术

- - Web前端 - ITeye博客
上一篇我们介绍了 Responsive Web Design之后，这次要来详细介绍CSS3 Media Queries了. 在上一篇中，我们提到 Responsive Web Desig n的实作方式有大半都是利用CSS3 Media Queries来达成. 而顾名思义Media Queries 就是要在支援CSS3 的浏览器中才能正常工作，IE8 以下不支援.

CSS4 Media Queries 新特性

- - 葵中剑's Blog - SwordAir.com
来自 css3.info 的消息，CSS4 Media Queries 已经成型，尽管它现在还只是一份 编辑草案，不过我们仍然可以从中看到新的 Media Queries 所具备的特质. 在 Changes Since the Media Queries Level 3 一节里，就能看到 CSS4 Media Queries 的新特性.

Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

- - 博客园_梦想天空
　　Respond.js 是一个快速、轻量的 polyfill，用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供多媒体查询的 min-width 和 max-width 特性，实现响应式网页设计（Responsive Web Design）. 20个非常绚丽的 CSS3 特性应用演示.

css3 变形

- - 博客园_Ruby's Louvre
CSS3从IE滤镜偷窍过来的创意，但易用性明显提高了许多. 利用这个，我们可以对某个元素进行旋传，缩放，倾斜与位移，并且区分元素类型，无论对块状元素还是内联元素都有效. rotateX(angle) 单独设定 rX 轴的角度. rotateY(angle) 单独设定 rY 轴的角度. rotateZ(angle) 单独设定 rZ 轴的角度.

ROI Media:反思网站设计

- - 中文互联网数据研究资讯中心
现在谁都可以轻松做一个网站，但根据ROI Media，只有4.13%的网站具备有效的HTML和CSS，更让人担忧的是只有40%的用户能在站点上找到他们需要的信息，这可能是用户自己的错，但也可能是由于糟糕的设计. Tencent CDC：工具型网站首页的设计思考. Hubspot：网站首页12大元素--信息图.