最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下。

CSS2/media

在CSS2中可以使用media属性可以使特定style只在指定媒体类型下其作用,比如页面有些部分需要在打印的时候隐藏或者变大,这时候可以使用media使某些style只在打印的时候生效

@media print {
/* 适用于印刷的样式 */
}
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

常用的媒体类型有

  1. all(所有),适用于所有设备。
  2. handheld(手持),用于手持设备。
  3. print(印刷),用于分页材料以及打印预览模式下在屏幕上的文档视图。
  4. projection(投影),用于投影演示文稿,例如投影仪。
  5. screen(屏幕) ,主要用于计算机屏幕。

在使用的时候可以在样式表直接书写 @media指令+空格+媒体类型(多个都好隔开)

@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }parsing-errors
}
@media screen, print {
body { line-height: 1.2 }
}

CSS3/meidia queries

在CSS3中对其进行了增强,添加了更多的媒体查询,CSS3中的Media Queries增加了更多的媒体查询,同时可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,比如如果网页用PC访问和Pad访问使用不同的style,在CSS2中只能把媒体类型设为screen是不能做到的,而在CSS3中可以对screen类型媒体设置表达式进一步判断屏幕大小来实现这一功能。可以写出这样的代码

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> <!-- CSS media query within a style sheet -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

当媒体类型匹配且表达式为真的时候,对应style就会其作用,除非使用not或者only操作符,否则媒体类型不是必需的,默认代表所有媒体类型。

操作符

and

and操作符用于将多个media feature组合成一个查询,同时用于组合media type 和media feature,一个基本的media query类似这样,一个meidia feature作用于所有media type

@media (min-width: 700px) { ... }

但是如果只想在横向显示时应用就可以使用and操作符把media type和media feature结合起来

@media (min-width: 700px) and (orientation: landscape) { ... }

这样上面的media query只有在可视窗口(viewport)最小是700px并且是横向显示的时候才返回true,如果还想进一步限制设备为tv可以这样

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

逗号分隔的列表

在使用逗号分隔的查询列表中每个查询都被视为一个独立的查询,任何本查询中的作用符不影响其他查询,只要有一个查询返回true,style就会被作用。

举例来说,如果希望特定style在viewport最小宽度为700px或手持式设备上生效,可以这么写:

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not

not操作符作用域整个查询,所以只有在整个查询返回false的情况下使用not后才会返回true。当使用逗号分隔的列表的时候not作用于邻近的查询,而不会作用于每个查询

@media not all and (monochrome) { ... }

查询其实会这样起作用

@media not (all and (monochrome)) { ... }

不是这样

@media (not all) and (monochrome) { ... }

对于逗号分隔的列表

@media not screen and (color), print and (color)

查询是这样子的

@media (not (screen and (color))), print and (color)

only

only操作符用于阻止不支持带有media feature的media queries的浏览器应用特定style

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

media features

说了好多次media feature了,到底有多少个media feature呢

  • width:浏览器宽度
  • height:浏览器高度
  • device-width:设备屏幕分辨率的宽度值
  • device-height:设备屏幕分辨率的高度值
  • orientation:浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape。
  • aspect-ratio:比例值,浏览器的纵横比.
  • device-aspect-ratio:比例值,屏幕的纵横比.
  • color:设备使用多少位的颜色值,如果不是彩色设备,值为0
  • color-index:色彩表的色彩数
  • monochrome:单色帧缓冲器每个像素的字节
  • resolution:分辨率值,设备分辨率值
  • scan:电视机类型设备扫描方式,progressive或interlace
  • grid:只能指定两个值0或1

如何引入media

有两种常用的引入方式

1、link方法引入

<link rel="stylesheet" type="text/css" href="styleB.css"  media="screen and (min-width: 600px) and (max-width: 800px)">

2、@media引入

@media screen and (min-width: 600px) and (max-width: 800px){

    选择器{

        属性:属性值;

    }

}

浏览器兼容性

应用

For iPhone 4

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

For iPad

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

移动设备iPad上的Safari和在iPhone上的是相同的,只是他们不同之处是iPad声明了不同的方向,比如说上面的例子,在纵向(portrait)时采用portrait.css来,在横向(landscape)时采用landscape.css。

For Android

/*240px的宽度*/
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/*360px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/*480px的宽度*/
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

参考

http://www.w3cplus.com/content/css3-media-queries

http://www.w3cplus.com/css3/css3-media-queries-for-iPhone-and-iPads

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

来源:https://www.cnblogs.com/dolphinX/p/3281417.html

CSS media queries 媒体查询的更多相关文章

  1. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  2. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  3. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  4. Media Queries媒体查询

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...

  5. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  6. 移动设备上的媒体查询 CSS media queries for mobile device

    CSS的媒体查询虽然在传统的互联网页面可能发挥的余地不是很大,但是自从苹果和安卓的风靡之后,移动平台上的web开发变得越来越流行了,同时CSS的媒体查询可谓派上了大用场了. 以下为翻译内容,原文来自这 ...

  7. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

  8. CSS3 之 Media(媒体查询器)

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

  9. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

随机推荐

  1. 编写javad代码实现使用Scanner从键盘读取一行输入,去掉其中重复字符, 打印出不同的那些字符

    package com.loaderman.test; import java.util.HashSet; import java.util.Scanner; public class Test2 { ...

  2. 溢出overflow: hidden

    如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...

  3. 如何使用Pythonapi函数写股票策略

    如何使用Python api 函数写股票策略 写策略需要了解的语法包括两方面,一方面是语言本身的语法(包括相关库),另一方面是量化平台提供的api.量化平台提供的api帮助文件里都有了,本文主要介绍写 ...

  4. beego 如何自定error

    beego通过Redirect方法来进行跳转: 1 2 3 func (this *AddController) Get() {     this.Redirect("/", 30 ...

  5. Linux批量文件管理

    Linux批量文件管理   实验目标: 通过本实验掌握批量建立.移动.复制文件或目录的操作,也可以作为后续shell编程的基础. 实验步骤: 1.现在有十台终端机器,要为每台机器建立3个文件,总共要建 ...

  6. 神经网络的debug

    先建一个只有一层隐藏层的网络确定一切工作正常 在一个数据点上训练,training accuracy应该马上到100%而val accuracy等于随机猜测(overfit),如果不是说明有bug. ...

  7. 纯Js ——文字上下左右滚动

    ScrollBaseJs.js var $$ = function (id) { return typeof id == 'string' ? document.getElementById(id) ...

  8. Web Service简介与开发实例

    简介 1.1.Web Service基本概念 Web Service也叫XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的 ...

  9. linux静态IP配置和网关配置

    我们在配置CentOS的时候,很多情况需要能联外网,那么就需要DNS解析功能,默认的是没有配置DNS信息的,所以我们得配置DNS信息起因我们在搜索Centos配置DNS信息的时候,很多都是说在这个文件 ...

  10. 不同浏览器之间的javascript和css兼容性问题

    po主手头维护的网站是上世纪的作品.当时约摸ie所占的市场份额相当大,以至于开发人员都没有考虑到浏览器兼容性问题(这不科学!).怎奈po主是个强迫症阿.最近在修改的时候,还是没忍住,把兼容性问题解决了 ...