在 CSS2 中，你可以为不同的媒介设备（如屏幕、打印机）指定专用的样式表，而现在借助 CSS3 的 Media Queries 特性，可以更为有效的实现这个功能。你可以为媒介类型添加某些条件，检测设备并采用不同的样式表。

　　例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

1
2
3
4
5
@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

如果你想链接到一个单独的样式表，把下面的代码放在<head>标签里。

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

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

1
2
3
4
5
@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Multiple Media Queries

你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

1
2
3
4
5
@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）

1
2
3
4
5
@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}　

For iPhone 4

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

1
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />　

For iPad

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

1
2
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">　

CSS3 Media Queries 实现响应式设计的更多相关文章

  1. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  2. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  3. CSS3 Media Queries实现响应式布局

    概念我就不在这里写啦.大家可以看看以下网页: http://www.runoob.com/cssref/css3-pr-mediaquery.html http://www.w3cplus.com/c ...

  4. 怎样使用CSS3媒体查询(Media Queries)制作响应式网站

    自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...

  5. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

  6. CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)

    现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这 ...

  7. paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结

    paip.自适应网页设计 跟 响应式 设计的区别跟原理and实践总结 响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 ...

  8. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  9. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

随机推荐

  1. Webform：Application、ViewState对象的用法

    Application Application对象的作用范围是整个全局,也就是说对所有用户都有效.它在整个应用程序生命周期中都是有效的,类似于使用全局变量一样,所以可以在不同页面中对它进行存取.它和S ...

  2. python_接口开发

    一.GET和POST请求from flask import Flask,jsonifydata = { 'name':'Jerry', 'sex':'男', 'age':'18'}app = Flas ...

  3. jQuery.extend 函数详解

    JQuery的extend扩展方法:      Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解.      一.Jquery的扩展方 ...

  4. [LeetCode] Reconstruct Original Digits from English 从英文中重建数字

    Given a non-empty string containing an out-of-order English representation of digits 0-9, output the ...

  5. csv表格处理（下）－－纯JS解析导入csv

    多日前的上篇介绍了csv表格,以及JS结合后端PHP解析表格填充表单的方法.其中csv转换成二维数组的时候逻辑比较复杂多坑,幸好PHP有丰富的库函数来处理,而现在用JS解析的话就没有那么幸运了,一切都 ...

  6. 手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法

    手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法 最近碰到Android微信内置浏览H5页面,因为其中的文本输入框(input)放置在靠近页面的中下方,点击文本框以后,则输入框会被弹出的手机 ...

  7. Linux用户管理（centos）

    useradd testuser; 添加用户 testuser为用户名 passwd testuser; 修改用户密码 提示两次输入密码   赋予root权限 修改 /etc/sudoers 文件,找 ...

  8. neo4j关闭和开启密码访问权限

    本例:neo4j-enterprise-2.3.1版本 neo4j默认安装是开启访问密码验证 可以发现,在conf/下的neo4j-server.properties配置文件 # Require (o ...

  9. XCode8 App上传AppStore更新

    1.在这个网站中https://itunesconnect.apple.com 点击"我的APP" 选取需要更新的app 2.点击加号 版本或平台,填写对应的更新版本 3.配置Xc ...

  10. 精通Web Analytics 2.0 （10） 第八章：竞争情报分析

    精通Web Analytics 2.0 : 用户中心科学与在线统计艺术 第八章:竞争情报分析 在现实世界中,收集竞争情报可能意味着雇人在竞争对手的垃圾桶(实际会发生!)翻找. 在虚拟世界中,堆如山的数 ...