一、初步了解

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. java课后思考问题（二）

    1.编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. import java.math.BigInteger; public class Suijishu public stati ...

  2. HBase 的Get(读)，Put(写)，Delete(删)，Scan(扫描)和Increment(列值递增)

    一.HBase介绍 1.基本概念 HBase是一种Hadoop数据库,经常被描述为一种稀疏的,分布式的,持久化的,多维有序映射,它基于行键.列键和时间戳建立索引,是一个可以随机访问的存储和检索数据的平 ...

  3. goodBye wordPress

    2016-07-28,我自己在GoDaddy上面注册了一个自己的域名,www.codetree.tech,同时在老薛主机上面购买了一个主机域名.我搭建了一个属于自己的博客,开心了很久.最近收到了域名续 ...

  4. SSM项目spring配置文件详细步骤（分门别类、灵巧记忆）

    spring-dao.xml文件 1.配置外部db.property文件: <context:property-placeholder location="classpath:jdbc ...

  5. 【计算机网络】一步一步学习IP路由流程

    TCP/IP协议簇是目前互联网应用最广的协议栈,谈到TCP/IP协议栈就不能不讲一讲IP路由的问题,因为在我们使用的网络通信中几乎每时每刻都在发生着IP路由的事件…….当你在网络世界中还是一位新手的时 ...

  6. Assignment 1:Chinese Text Data Processing.

    记录过程. Lucene分词:http://blog.csdn.net/cyxlzzs/article/details/7999212 Lucene自定义词典:http://lilongbao.blo ...

  7. .NET面试题6

    常见面试题目: 1. 所有类型都继承System.Object吗? 2. 解释virtual.sealed.override和abstract的区别 3. 接口和类有什么异同? 4. 抽象类和接口有什 ...

  8. SQL DATEDIFF语法及时间函数 Sql 查询当天、本周、本月记录

    SQL DATEDIFF语法及时间函数 Sql 查询当天.本周.本月记录 转:http://blog.csdn.net/Json1204/article/details/7863801?locatio ...

  9. Java入门之JDK安装及环境变量配置

    一.安装JDK 安装过程中会出现两次安装提示 .第一次是安装 jdk ,第二次是安装 jre .建议两个都安装在同一个java文件夹中的不同文件夹中. (注:若无安装目录要求,可全默认设置.无需做任何 ...

  10. .NET 自动内存管理(垃圾收集GC)

    自动内存管理(垃圾收集GC) 在面向对象的环境里, 要使用资源,必须为响应 的类型分配一定 的内存空间.下面是访问一个资源所需要的几个步骤: 1. 调用中间语言(IL)的newobj 指令.当我们用N ...