1. 最大宽度max-width

“max-width”是媒体特性中最常用的一个特性,其意思是指媒体类型小于或等于指定的宽度时,样式生效。如:

@media screen and (max-width:480px){
.ads {
display:none;
}
}

上面表示的是:当屏幕小于或等于480px时,页面中的广告区块(.ads)都将被隐藏。

2.最小宽度min-width

“min-width”与“max-width”相反,指的是媒体类型大于或等于指定宽度时,样式生效。

@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

上面表示的是:当屏幕大于或等于900px时,容器“.wrapper”的宽度为980px。

3.多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说,一个Media Query中可以包含0到多个表达式,表达式又可以包含0到多个关键字,以及一种媒体类型。

当屏幕在600px~900px之间时,body的背景色渲染为“#f5f5f5”,如下所示。

@media screen and (min-width:600px) and (max-width:900px){
body {background-color:#f5f5f5;}
}

4.设备屏幕的输出宽度Device Width

在智能设备上,例如iPhone、iPad等,还可以根据屏幕设备的尺寸来设置相应的样式(或者调用相应的样式文件)。同样的,对于屏幕设备同样可以使用“min/max”对应参数,如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代码指的是“iphone.css”样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的“max-device-width”所指的是设备的实际分辨率,也就是指可视面积分辨率。

5. not关键词

使用关键词“not”是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如:

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

6.only关键词

only用来指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性的设备,正常调用样式,此时就当only不存在;表示不支持媒体特性但又支持媒体类型的设备,这样就会不读样式,因为其先会读取only而不是screen;另外不支持Media Queries的浏览器,不论是否支持only,样式都不会被采用。如

<linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中如果没有明确指定Media Type,那么其默认为all,如:

<linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在样式中,还可以使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中,指定方式如下所示。

<linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

上面代码中style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。

到目前为止,CSS3 Media Queries得到了众多浏览器支持,除了IE6-8浏览器不支持之外,在所有现代浏览器中都可以完美支持。还有一个与众不同的时,Media Queries在其他浏览器中不要像其他CSS3属性一样在不同的浏览器中添加前缀

Media Queries使用方法的更多相关文章

  1. CSS3学习教程:Media Queries详解

    说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  2. 【css】CSS3 Media Queries 详解【转】

    说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...

  3. 第11章 Media Queries 与Responsive 设计

    Media Queries--媒体类型(一) 随着科学技术不断的向前发展,网页的浏览终端越来越多样化,用户可以通过:宽屏电视.台式电脑.笔记本电脑.平板电脑和智能手机来访问你的网站.尽管你无法保证一个 ...

  4. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  5. IE9中Media queries在iframe无效的解决方法

    在css中有5个media querie @media screen and(min-width:0px)and(max-width:319px){ body {background-color:re ...

  6. CSS3 Media Queries 详细介绍与使用方法

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...

  7. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  8. CSS3 Media Queries 详细介绍与使用方法[转]

    Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 关于Med ...

  9. IT兄弟连 HTML5教程 Media Queries的使用方法

    在上例中,我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件 ...

随机推荐

  1. WPF设置DataGrid行内容高度自适应 与 TextBox/TextBlock内容高度自适应

    WPF设置DataGrid行内容高度自适应  TextBox/TextBlock内容高度自适应  参考: DataGrid 控件中的调整大小选项: http://msdn.microsoft.com/ ...

  2. zookeeper心跳机制流程梳理

    zookeeper心跳机制流程梳理 Processor链Chain protected void setupRequestProcessors() { RequestProcessor finalPr ...

  3. EntityFrame CodeFirst 自动生成表

    来源:http://msdn.microsoft.com/zh-cn/data/jj193542 本视频和分步演练介绍通过 Code First 开发建立新数据库.这个方案包括建立不存在的数据库(Co ...

  4. C#生成二维码的方法

    本文实例讲述了C#生成二维码的方法.分享给大家供大家参考.具体实现方法如下: 首先引用ThoughtWorks.QRCode.dll 具体代码如下: 复制代码 代码如下: using System; ...

  5. CSV格式数据如何导入SqlServer?

    一.使用微软数据库IDE管理软件:Microsoft SQL Server Management Studio 1.标准的CSV文件格式如下: 2.建数据表 3.在需要导入的数据库右键点击“任务”,选 ...

  6. USACO翻译:USACO 2014 US Open 三题

    USACO 2014 US Open 一.题目概览 中文题目名称 牧场装饰 里程表 牛像展览 英文题目名称 decorate odometer fairphoto 可执行文件名 decorate od ...

  7. js 小知识

    在iframe 页面获取父级页面的 html var obj = window.parent.document.getElementById('modaliframe'); 解决Jquery 的在一个 ...

  8. AutoIt操作Windows GUI实现文件上传

    AutoIt 一个使用类似BASIC脚本语言的免费软件,用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组合来实现自动化任务. 官方网站: htt ...

  9. js 函数返回函数

    <script> var aa = function(fn, time, interval){ return function(){ if (typeof(fn) != 'function ...

  10. Spring mvc example

    Spring mvc example 1.下载spring源包 spring地址:http://www.springsource.org/download 我下的是spring-framework-3 ...