一、初步了解

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. Office 2016 word无法粘贴（Ctrl + V）

    最近下载了一个 Office 2016 专业版 使用,发现 word 无法使用 Ctrl + V 粘贴东西,由于经常需要复制粘贴东西,无法粘贴影响很大 查了很多资料,尝试过很多的方法,终于发现问题的所 ...

  2. Windows下VsCode的简单配置

    1. 安装插件 2. 配置终端软件 安装cmder 添加cmder 按下ctrl+shift+p键,输入setting,打开user settings如图: 将  "terminal.int ...

  3. 001 Two Sum 两个数的和为目标数字

    Given an array of integers, return indices of the two numbers such that they add up to a specific ta ...

  4. python 几个常用自定义函数在dataframe上的应用

    最小值与最大值 def f(x): return pd.Series([x.min(),x.max(),index=['min','max']) frame.apply(f) 浮点值的格式化 form ...

  5. python dataframe drop_duplicates用法技巧去重

    data.drop_duplicates()#data中一行元素全部相同时才去除 data.drop_duplicates(['a','b'])#data根据’a','b'组合列删除重复项,默认保留第 ...

  6. Hidden Markov Models笔记

    Andrew Ng CS229 讲义: https://pan.baidu.com/s/12zMYBY1NLzkluHNeMNO6MQ HMM模型常用于NLP.语音等领域. 马尔科夫模型(Markov ...

  7. 使用Faster R-CNN做目标检测 - 学习luminoth代码

    像玩乐高一样拆解Faster R-CNN:详解目标检测的实现过程 https://mp.weixin.qq.com/s/M_i38L2brq69BYzmaPeJ9w 直接参考开源目标检测代码lumin ...

  8. 性能测试工具LoadRunner09-LR之Virtual User Generator 日志

    在录制和回放的时候,VU会分别把发生的事件记录成日志文件,这些日志有利于我们跟踪VU和服务器的交互过程 回放日志(Replay Log) 脚本回放运行时的输出都记在这个Log里 “输出”窗口的“回放日 ...

  9. Docker学习笔记(2)-docker镜像操作

    本节将会涉及Docker的镜像操作. 1. 获取镜像 如何获取Docker Hub上的镜像?可通过docker pull命令获取,其格式为: docker pull [选项] [Docker Regi ...

  10. Session有什么重大BUG，有什么方法可以解决

    [考点]ASP.NET中Session的多种保存方法.[出现频率]★★★☆☆[解答]使用进程内会话状态模式时,如果aspnet_wp.exe或应用程序域重新启动,则会话状态数据将丢失.可以用Sate ...