一、初步了解

Media Queries是CSS3新增加的一个模块功能，其最大的特点就是通过css3来查询媒体，然后调用对应的样式。

了解Media Queries之前需要了解媒体类型以及媒体特性：

可以通过媒体类型（Media Type）对不同的设备指定不同的样式，W3C总共列出了10种媒体类型

二、媒体类型的引用方法有3种

  • link方法

就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下：

<link rel="stylesheet" type=" text/css " href="style.css" media="screen"/>
  • @import方法

@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式。

①通过@import调用另一个样式文件

@importurl(reset.css) screen;

@importurl(print.css) print;

②在<head></head>标签中的<style></style>中引入，但这种方法IE6-7不支持

<head>

<style type="text/css">

    @importurl(style.css) screen;

</style>

</head>
  • @media方法

@media是css3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型也有两种方式

①在样式文件中引用媒体类型

@media screen {

   选择器{/*你的样式代码写在这里…*/}

}

②使用@media引入媒体类型的方式是在<head></head>标签中的<style>中使用

<head>

<style type="text/css">

    @media screen{

    选择器{/*你的样式代码写在这里…*/}

}

</style>

</head>

　　

三、Media Queries使用方法

前面简单的介绍了Media Queries如何引用到项目中，但Media Queries有其自己的使用规则。具体来说,Media Queries的使用方法如下。

@media 媒体类型 and (媒体特性){样式}

媒体特性是通过min/max来表示大于等于或小于做为逻辑判断，而不是使用小于（<）和大于（>）这样的符号来判断。

①最大宽度max-width 

意思是指媒体类型小于或等于指定宽度时，样式生效：

/*当屏幕小于或等于480px时，.ads将隐藏 */

@media screen and (max-width:480px){

 .ads {

   display:none;

  }

}

②最小宽度min-width

指媒体类型大于或等于指定宽度时，样式生效

/* 当屏幕大于或等于900px时，容器“.wrapper” 的宽度为980px*/

@media screen and (min-width:900px){

.wrapper{width: 980px;}

}

③多个媒体特性使用

Media Queries可以使用关键词"and"将多个媒体特性结合在一起。

/* 当屏幕在600px~900px之间时，body的背景色为#000 */

@media screen and (min-width:600px) and (max-width:900px){

  body {background-color:#000;}

}

④设备屏幕的输出宽度

在智能设备上，例如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，这里的max-device-width 所指的是设备实际的分辨率，也就是可视面积分辨率。

⑤not关键词

使用关键词“not” 使用来排除某种特定的媒体类型。

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

上面表示样式代码将作用在 除print打印设备和设备小于或等于1200px的所有设备中

⑥only关键词

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。在Media Query中如果没有明确指定Media Type，那么其默认为all　

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

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

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

　　

　

　

　　

css3之Media Queries 媒体查询的更多相关文章

  1. CSS3 之 Media（媒体查询器）

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

  2. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  3. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  4. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  5. Media Queries媒体查询

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...

  6. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  7. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  8. media query媒体查询

    媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...

  9. [CSS3] CSS Media Queries

    Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...

随机推荐

  1. 29-----BBS论坛

    BBS论坛(二十九) 29.帖子详情页布局 (1)front/hooks.py @bp.errorhandler def page_not_found(): return render_templat ...

  2. nginx —— 理解nginx_upstream_jvm_route模块解决tomcat多节点session不一致问题

    这种方式不需要修改web工程只需要对nginx下载nginx_upstream_jvm_route插件,修改tomcat和nginx配置,就能解决session问题.由于这种方式不会把session存 ...

  3. 转 dango的模型总结 and django-关于manage.py migrate无效的问题

    http://iluoxuan.iteye.com/blog/1703061 1:用过django就知道django的model有多方便: 首先介绍下django的模型有哪些属性:先看例子: Djan ...

  4. 移动测试之appium+python 导出报告（六）

    下载 HTMLTestRunner.py python3可以参考这个地址 这是针对Python2.7版本 test.py from appium import webdriver import tim ...

  5. Django-1 简介

    1.1 MVC与MTV模型 MVCWeb服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型负 ...

  6. python 进程池Pool以及Queue的用法

    import os,time,random from multiprocessing import Pool def task(name): print('正在运行的任务:%s,PID:(%s)'%( ...

  7. Kudu和HBase定位的区别

    不多说,直接上干货! Kudu和HBase定位的区别 Kudu 的定位是提供 “ast analytics on fast data” ,也就是在快速更新的数据上进行快速的查询.它定位 OLAP 和少 ...

  8. Quartz使用(5) - Quartz的Job存储及集群部署

    1. Job的存储与持久化 Quartz的JobStore接口定义了作业Job.触发器trigger.调度器Scheduler等数据存储机制.Quartz主要有两种Job存储类型:内存存储RAMJob ...

  9. H-ui出现提交后没办法关闭

    可以用sublime代替服务器来解决,或者是webstorm可以自行搭建服务器来解决当前的问题. sublime可以更改端口号 自己加上一个服务器 默认打开浏览器的 “快捷键”

  10. return break continue区别

    return:1.跳出整个方法体 2.返回值 function(a){return a=2}; break:跳出当前循环, continue:跳出当前判断继续执行