一、初步了解

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. mysql 操作数据库创建，增删改查

    创建数据库 默认字符编码 默认排序CREATE DATABASE IF NOT EXISTS day11 DEFAULT CHARSET utf8 COLLATE utf8_general_ci; / ...

  2. java课后思考问题（二）

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

  3. 转 mysql front安装与使用教程 mysql 工具

    mysql front安装与使用教程 由 kaikai0220 创建,Alma 最后一次修改 2018-04-25 mysql front一款小巧的管理Mysql的应用工具,那么这个工具该如何安装和使 ...

  4. Maven使用之packing篇

    项目的打包类型:pom.jar.war 项目中一般使用maven进行模块管理,每个模块下对应都有一个pom文件,pom文件中维护了各模块之间的依赖和继承关系.项目模块化可以将通用的部分抽离出来,方便重 ...

  5. tcp 粘包 和 TCP_NODELAY 学习

    TCP通信粘包问题分析和解决  在socket网络程序中,TCP和UDP分别是面向连接和非面向连接的.因此TCP的socket编程,收发两端(客户端和服务器端)都要有成对的socket,因此,发送端为 ...

  6. Murano Service Architecture Introducation

    1. Murano Project Mission From the third-party tool developer’s perspective, the application catalog ...

  7. 为什么vue+webpack需要用到node，如何部署项目到服务器？

    第一部分 之前一直不太理解为什么要使用vue+webapck,还有在使用了vue-cli之后会用到后台,即vue-cli自动帮我们安装了express服务器,在本地服务器上运行,因为我们希望可以模拟在 ...

  8. apache POI技术的使用

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. 下载开发包: 解压上面的zip文件: 在项目中引入 ...

  9. Integer代码分析

    我们都知道Integer是int的封装类,提供了一些类型转换等工具方法,有一个-128-127的缓存,而且是final的. ----------------------------- 干货: Inte ...

  10. 【Linux】ping命令详解

    1.ping指定目的地址10.10.0.1 为接口tun0 ping 10.10.0.1 -i tun0