css Media媒体查询深入介绍

媒介类型

在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在

media属性用于为不同的媒介类型规定不同的样式

screen 计算机屏幕(默认值)
tty 电传打字机以及使用等宽字符网格的类似媒介
tv 电视类型设备(低分辨率、有限的屏幕翻滚能力)
projection 放映机
handheld 手持设备(小屏幕、有限的带宽)
print 打印预览模式 / 打印页
braille 盲人用点字法反馈设备
aural 语音合成器
all 适合所有设备

真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all'

<style media="screen">
.box{height: 100px;width: 100px; background-color: lightblue;}    
</style>
<div class="box"></div>

媒体属性

媒体属性是CSS3新增的内容,多数媒体属性带有“min-”和“max-”前缀,用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>”字符。

[注意]媒体属性必须用括号()包起来,否则无效。

下表中列出了所有的媒体属性:

width | min-width | max-width

height | min-height | max-height

device-width | min-device-width | max-device-width

device-height | min-device-height | max-device-height

aspect-ratio | min-aspect-ratio | max-aspect-ratio

device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio

color | min-color | max-color

color-index | min-color-index | max-color-index

monochrome | min-monochrome | max-monochrome

resolution | min-resolution | max-resolution

scan | grid

【1】颜色(color)

指定输出设备每个像素单元的比特值。如果设备不支持输出颜色,则该值为0

向所有能显示颜色的设备应用样式表

<style>
@media (color){
    .box{height: 100px;width: 100px;background-color: lightblue;}    
}    
</style>
<div class="box"></div>

【2】颜色索引(color-index)

颜色索引指定了输出设备中颜色查询表中的条目数量,如果没有使用颜色查询表,则值等于0

向所有使用至少256个索引颜色的设备应用样式表(下列代码无显示,说明返回值为0)

<style>
@media (min-color-index: 256){
    .box{height: 100px; width: 100px;background-color: lightgreen;}    
}    
</style>    
<div class="box"></div>

【3】宽高比(aspect-ratio)

宽高比描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

向可视区域是正方形或者是宽屏的设备应用样式表

<style>
@media (min-aspect-ratio: 1/1) {
    .box{height: 100px;width: 100px; background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【4】设备宽高比(device-aspect-ratio)

设备宽高比描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例。

向宽高比为16:9的特殊宽屏设备应用样式表

<style>
@media (device-aspect-ratio:16/9) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>

【5】设备高度(device-height)

设备高度描述了输出设备的高度

向显示在最小高度1000px的屏幕上的文档应用样式表

<style>
@media (min-device-height: 1000px) {
    .box{ height: 100px;width: 100px; background-color: pink;}        
}
</style>
<div class="box"></div>

【6】设备宽度(device-width)

设备宽度描述了输出设备的宽度

向显示在最小宽度1000px的屏幕上的文档应用样式表

<style>
@media (min-device-width: 1000px) {
    .box{ height: 100px; width: 100px;background-color: lightblue; }        
}
</style>
<div class="box"></div>

【7】网格(grid)

网格判断输出设备是网格设备还是位图设备。如果设备是基于网格的(例如电传打字机终端或只能显示一种字形的电话),该值为1,否则为0。

向非网格设备应用样式表

<style>
@media (grid:0) {
    .box{height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【8】高度(height)

高度描述了输出设备渲染区域(如可视区域的高度或打印机纸盒的高度)的高度

向高度大于800px的可视区域的设备应用样式表

<style>
@media (min-height:800px) {
    .box{ height: 100px; width: 100px;background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【9】宽度(width)

宽度描述了输出设备渲染区域的宽度

向宽度大于800px的可视区域的设备应用样式表

<style>
@media (min-width:800px) {
    .box{ height: 100px;width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【10】黑白(monochrome)

黑白指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0

向非黑白设备应用样式表

<style>
@media (monochrome:0) {
    .box{height: 100px; width: 100px; background-color: lightgreen;}        
}
</style>
<div class="box"></div>

【11】方向(orientation)

方向指定了设备处于横屏(宽度大于宽度)模式还是竖屏(高度大于宽度)模式

值:landscape(横屏) | portrait(竖屏)

向竖屏设备应用样式表

<style>
@media (orientation: portrait) {
    .box{height: 100px;width: 100px;background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【12】分辨率(resolution)

分辨率指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示

[注意]关于屏幕三要素(屏幕尺寸、分辨率、像素密度)的相关内容移步至此

向每英寸至少90点的设备应用样式

<style>
@media (min-resolution: 90dpi) {
    .box{height: 100px;width: 100px; background-color: lightgreen; }        
}
</style>
<div class="box"></div>

【13】扫描(scan)

扫描描述了电视输出设备的扫描过程

值: progressive | interlace

语法

媒体查询包含了一个CSS2已有的媒介类型(或称为媒体类型)和CSS3新增的包含一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假。

当媒体查询为真时,相关的样式表或样式规则就会按照正常的级联规则被应用。即使媒体查询返回假, <link> 标签上带有媒体查询的样式表仍将被下载(只不过不会被应用)。

<link rel="stylesheet" href="style.css" media="print">
<div class="box"></div>

media并不是'print',所以媒体查询为假。但是,style.css文件依然被下载

1.jpg

逻辑操作符:

操作符not、and、only和逗号(,)可以用来构建复杂的媒体查询

and

and操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有当每个属性都为真时,这条查询的结果才为真

[注意]在不使用not或only操作符的情况下,媒体类型是可选的,默认为all

满足横屏以及最小宽度为700px的条件应用样式表

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

由于不使用not或only操作符的情况下,媒体类型是可选的,默认为 all,所以可以简写为

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

or

将多个媒体查询以逗号分隔放在一起;只要其中任何一个为真,整个媒体语句就返回真,相当于or操作符

满足最小宽度为700像素或是横屏的手持设备应用样式表

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

not

not操作符用来对一条媒体查询的结果进行取反

[注意]not关键字仅能应用于整个查询,而不能单独应用于一个独立的查询

@media not all and (monochrome) { ... }
//等价于
@media not (all and (monochrome)) { ... }

only

only操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

media="only screen and (max-width:1000px)"{...}

上面这行代码,在老式浏览器中被解析为media="only",因为没有一个叫only的设备,所以实际上老式浏览器不会应用样式

media="screen and (max-width:1000px)"{...}

上面这行代码,在老式浏览器中被解析为media="screen",它把后面的逻辑表达式忽略了。所以老式浏览器会应用样式

所以,在使用媒体查询时,only最好不要忽略

方法

window.matchMedia()方法用来检查CSS的mediaQuery语句

[注意]IE9-浏览器不支持,可以使用第三方函数库matchMedia.js

属性

window.matchMedia()方法接受一个mediaQuery语句的字符串作为参数,返回一个MediaQueryList对象。该对象有media和matches两个属性。

media:返回所查询的mediaQuery语句字符串

matches:返回一个布尔值,表示当前环境是否匹配查询语句

var result = window.matchMedia('(min-width: 600px)');
console.log(result.media); //'(min-width: 600px)'
console.log(result.matches); // true

可以根据matchMedia()方法的matches属性的不同结果,进行对应的设置

var result = window.matchMedia('(min-width: 600px)');
if (result.matches) {
  //
}else{
 //
}

[注意]如果window.matchMedia无法解析mediaQuery参数,matches属性返回的总是false,而不是报错

var result = window.matchMedia('123');
console.log(result.matches);//false

事件

window.matchMedia方法返回的MediaQueryList对象有两个方法,用来监听事件:addListener方法和removeListener方法

// 指定回调函数
mql.addListener(mqCallback);
// 撤销回调函数
mql.removeListener(mqCallback);

注意,只有mediaQuery查询结果发生变化时,才调用指定的回调函数

所以,如果想要mediaQuery查询未变化时,就显示相应效果,需要提前调用一次函数

下面这个例子是当页面宽度小于1000px时,页面背景颜色为品红色;否则为淡蓝色

var mql = window.matchMedia("(min-width: 1000px)");
mqCallback(mql);
mql.addListener(mqCallback);
function mqCallback(mql) {
  if (mql.matches) {
    document.body.background = 'pink';
  }else{
      document.body.background = 'lightblue';
  }
}

打印样式

媒体查询的一个常用功能是打印样式的设置,主要是背景清除、字体颜色变黑等

@media print{
    *,*:before,*:after{
        background:transparent!important;
        color:#000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    a,a:visited{
        text-decoration: underline;
    }
    a[href]:after{
        content:"(" attr(href) ")";
    }
    abbr[title]:after{
        content:"(" attr(title) ")";
    }
    a[href^="#"]:after,a[href^="javascript:;"]:after{
        content:"";
    }
    pre,blockquote{
        border: 1px solid #999;
        /*只有opera浏览器起作用,避免在元素内部插入分页符*/
        page-break-inside:avoid;
    }
    thead{
        display:table-header-group;
    }
    tr,img{
        page-break-inside:avoid;
    }
    img{
        max-width:100%!important;
    }
    p,h2,h3{
        /*元素内部发生分页时,最少保留3行*/
        orphans:3;
        /*元素内部发生分页时,元素顶部最少保留3行*/
        windows:3;
    }
    h2,h3{
        /*避免在元素后面插入一个分页符*/
        page-break-after:avoid;
    }
}

相对单位

如果媒体查询@media使用的是相对单位,如rem,这里有一个坑需要着重强调一下。

一般而言,rem是相对于HTML的字体大小的。但是,由于媒体查询的级别非常高,它并不是HTML的子元素,不是相对于HTML,而是相对于浏览器的,而浏览器的默认字体大小是16px。

如果HTML设置字体大小为12px,设置如下媒体查询:

media="only screen and (max-width:1rem)"

实际上,max-width等于16px,而不是12px

而正是由于媒体查询是相对于浏览器的, 所以使用rem就没有必要,完全可以使用em来替代

media="only screen and (max-width:1em)"
Image placeholder
前端答疑
未设置
  21人点赞

没有讨论,发表一下自己的看法吧

推荐文章
【CSS全解01】CSS基础-体系化学CSS

大纲 基础部分学习占比:HTML1%`CSS19%Javascript80%`(`基础部分?%框架?%`项目?%) CSS历史 AcidTestforbrowser CSS是艺术(非逻辑,用测试经验来

社交媒体登录认证提供者大全 —— Socialite Providers,支持微博、微信、QQ等

社交媒体登录认证提供者大全——SocialiteProviders,支持微博、微信、QQ等 1、简介 SocialiteProviders是一个扩展自LaravelSocialite的OAuth1&

Ubuntu 中使用 Nginx+rtmp 搭建流媒体直播服务.md

一、背景本篇文章是继上一篇文章《Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务》文章而写,在上一篇文章中我们搭建了一个点播服务器,在此基础上我们再搭建一个直播服务器,二、配置rtmp

媒体开放日,探秘百分点认知智能战略!

2009年7月1日,数据智能技术公司百分点正式成立,今年正好是第10个年头。百分点公司新址10年间,百分点经过多次转型,逐步形成了目前的企业级(ToB)、政府级(ToG)和SaaS服务三大业务体系,服

“小应用”背后的“大改变” 爱奇艺赋能流媒体播放服务

热门视频里,“弹幕盖脸”几乎是必然事件,然而有一个地方看视频,你会发现密密麻麻的弹幕都绕开主角飘过,这个地方就是爱奇艺。对于大家观看视频时喜闻乐见的弹幕,爱奇艺提供了蒙版弹幕服务,可以让用户实现“弹幕

RTSP、RTMP网络摄像头互联网无插件直播视频流媒体服务器EasyNVR在windows上无法启动问题排查

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTSP、RTM

安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCXWeb插件进行直播。对于安防监控

视频流媒体服务器对接宇视摄像机OCX插件出现error code 14001错误分析

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP、HTT

RTSP-ONVIF协议安防视频监控流媒体服务解决方案EasyNVR在Windows重启时提示“进程意外终止”问题解析

什么是ONVIFOpenNetworkVideoInterfaceForum,开放型网络视频接口论坛,以公开、开放的原则共同制定开放性行业标准。是一个提供开放网络视频接口的论坛组织。ONVIF规范描述

安防摄像头RTSP/Onvif协议网页无插件直播视频流媒体服务器EasyNVR之按需直播如何有效利用最大上行带宽

介绍一般情况下,直播默认的播放方式是非按需直播,但很多情况下,不少用户会选择按需直播。按需直播能够减少带宽流量和服务器性能占用,最优的提高服务器的使用效率。下面我们来系统介绍下EasyNVR中按需直播

css伪元素的使用介绍

:before和::before的区别在介绍具体用法之前,简单介绍下伪类和伪元素。伪类大家听的多了,伪元素可能听到的不是那么频繁,其实CSS对这两个是有区分的。有时你会发现伪类元素使用了两个冒号(::

选择器和介绍CSS布局笔记

css选择器: 1.元素选择器,例如:p{}; 2.类选择器,例如:.box{}; 3.ID选择器,例如:#box{};

不一样的css,sass(scss)的基本使用

前言此文主要记录sass的scss语法的基本使用。sass是css的预编译器,它扩展一些css所没有的变量的定义、条件控制、循环、自定义方法等。基础内容1.变量/*scss*/ //声明变量 $pri

Elasticsearch分词器介绍、内置分词器及配置中文分词器

1、分词器、分词器是从一串文本中切分一个个的词条,并对每个词条进行标准化,包含三个部分: characterfilter:分词之前的预处理,过滤掉HTML标签、特殊符号转换(例如,将&符号转换成and

css3.0和css2.0区别?

css3.0和css2.0区别?css3加强了css2的功能,增加了新的属性和新的标签,并且删除了一些冗余的标签,在布局方面减少了代码量。以前比较复杂的布局现在一个属性就搞定了(columns之类的属

css1和css2的区别是什么?

css1和css2的区别是什么?CSS1提供有关字体、颜色、位置和文本属性的基本信息,该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。CSS2.0提供给我们了一个机制,让开发时可以不考虑显

深入浅出百亿请求高可用Redis(codis)分布式集群揭秘

摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis

【THE LAST TIME】深入浅出 JavaScript 模块化

前言Thelasttime,Ihavelearned【THELASTTIME】一直是我想写的一个系列,旨在厚积薄发,重温前端。也是对自己的查缺补漏和技术分享。欢迎大家多多评论指点吐槽。系列文章均首发于

SSH(Secure Shell)介绍

SSH(SecureShell)介绍 SSH安装 查看是否已安装: CentOS:rpm-qa|grepopenssh Ubuntu:dpkg-l|grepopenssh 安装: CentOS6:s

【Kubernetes系列】第5篇 Ingress controller – traefik组件介绍

1.概述为了能够让Ingress资源能够工作,在Kubernetes集群中必须至少有一个运行中的ingresscontroller组件。也就是说如果在kubernetes集群中没有一个ingressc

dw cs6怎么保存为css格式

dwcs6怎么保存为css格式1、首先,打开DreamweaverCS6,新建一个css文档,选中“css”,点击确定按钮。2、将设计好的css样式放入该页面,@charset"utf-8";用来指定

Python入门教程_4. 深入 Python 流程控制

除了刚刚介绍的while语句,Python还有一些在其他语言中常见的控制流语句,并做了一些改动。 4.1.if语句 也许最著名的语句是if语句了。 例如: >>>x=int(input("Please

深入浅出 JSON Web Token

JSONWebToken原理 Web应用可分为客户端和服务端,这两者之间经常需要进行身份认证。 由于HTTP是无状态协议,不能保存认证后的用户状态,因此,每一次发送请求都需要重复的进行认证。 为了

API 系列 - 深入浅出 JSON Web Token

原理Web应用可分为客户端和服务端,这两者之间经常需要进行身份认证。由于HTTP是无状态协议,不能保存认证后的用户状态,因此,每一次发送请求都需要重复的进行认证。为了解决该问题,通常会使用Cookie