一、初步了解

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. my.宝石 --- --- ZC 收集

    1.         DT PT 头盔 太阳石 物理伤害+8     √     月亮石 物理防御+12     √ 武器 太阳石 物理伤害+8   √     舍利子 法术伤害+6         ...

  2. 生成jvm快照文件

    原文:https://blog.csdn.net/jijianshuai/article/details/79128033  -Xmx20m -Xms5m -XX:HeapDumpOnOutofMem ...

  3. ES6使用常量做为函数名

    重点是 要给常量加一个中括号 就是这么任性~ [SET_INFO](state) { state.userInfo = { name: cookie.getCookie('name'), token: ...

  4. robotframe 学习笔记1

    在robot framework中,通过 Set variable关键字来定义变量 连接对象: 通过Catenate关键字可以连接多个信息 加上"SEPARATOR=",可以对多个 ...

  5. 大型分布式java应用与SOA

    1.基于消息方式.远程调用方式的架构带来的问题: 1.1 系统多元化的问题 [解决]: 对共用逻辑部分进行抽象: 1.2 系统访问量.数据量上涨后带来的问题 [解决]: 拆分系统: 1.3 在构建共用 ...

  6. jQuery源代码学习_工具函数_type

    jquery源代码学习_工具函数_type jquery里面有一个很重要的工具函数,$.type函数用来判断类型,今天写这篇文章,是来回顾type函数的设计思想,深入理解. 首先来看一下最终结果: 上 ...

  7. 《大巧不工 web前端设计修炼之道》学习笔记

    前端设计如同一个人的着装与外表,站点的设计总是最先吸引人们的眼球.布局是否合理.风格是否简介.配色是否和谐,流程是否通畅,操作是否便捷,这些前端特效都影响着用户对站点的认可度.随着用户体验,可用性,可 ...

  8. checkbox判断选中的三种方法

    方法一: if ($("#checkbox-id")get(0).checked) {     // do something } 方法二: if($('#checkbox-id' ...

  9. 树莓派WLAN连接PC（不通过路由器）

    上一篇博文捣鼓了一下树莓派直连线连接PC.吃完午饭心血来潮,树莓派既然能用直连线连接PC,曾经也试过拿PC当作热点,为何不尝试一下用WLAN将树莓派与PC互连呢?果断搞起. 首先,我当前笔记本是用WL ...

  10. vue 实现二选一列表

    <template> <div> <ul> <li :class="{active:classIndex==classNum}" clas ...