css3之Media Queries 媒体查询
一、初步了解
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 媒体查询的更多相关文章
- CSS3 之 Media（媒体查询器）
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- Media Queries 媒体查询
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- media query媒体查询
媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...
- [CSS3] CSS Media Queries
Using CSS media queries allows you to design responsive layout in your web apps and website. We will ...
随机推荐
- ETL的两种架构（ETL架构和ELT架构）
ETL ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词 ...
- 浅谈APP消息推送
作为移动端APP产品运营最重要的运营手段,消息推送(push)被越来越多的APP厂商所重视,在信息泛滥的移动互联网时代,手机APP应用安装得越来越多,小小的手机屏幕每天收到的消息推送也越来越多,站在用 ...
- SQL---MySQL数据库---聚合函数
1.数值 format(x,n) 将x格式化为 由逗号分隔,小数点后n 位的数:
- RTT之内核服务函数
一 延时函数: rt_thread_delay(t) //调用时进入系统调度. rt_kprintf()函数在kservice.c中实现,如果不使用设备驱动,则由自定义函数void rt_hw_con ...
- python3+Appium自动化10-日志收集
日志概述 日志作用 日志是定位问题的重要手段 日志级别 级别 何时使用 DEBUG 调试信息,也是最详细的日志信息 INFO 证明事情按预期工作 WARNING 表明发生了一些意外,或者不就的将来(如 ...
- [转]HTML字符实体（Character Entities），转义字符串（Escape Sequence）
为什么要用转义字符串? HTML中<,>,&等有特殊含义(<,>,用于链接签,&用于转义),不能直接使用.这些符号是不显示在我们最终看到的网页里的,那如果我们希 ...
- 安装rails遇到的问题
1 要安装js运行环境,例如Nodejs,如果使用nvm记得,安装完执行nvm use '版本号' 2 或者在Gemfile文件中加入: gem 'execjs'gem 'therubyracer'然 ...
- 认识web
URL详解: URL是Uniform Resource Locator 的简写,统一资源定位符. 一个URL由以下几部分组成: scheme:代表的是访问的协议,一般为http或者https以及ftp ...
- linq 两个字段排序
在linq中排序方法有: OrderBy() --对某列升序排序 ThenBy() --某列升序后对另一列后续升序排序 OrderByDescending() --对某列降序排序 ThenBy ...
- Mac Postman app使用方法
Postman是一种网页调试与发送网页http请求的chrome插件.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口.本文是使用的Mac端的app.利用第三方平台LeanClo ...