In-depth understanding of CSS Media media queries

× Table of Contents [1]Media type [2]Media attribute [3]Syntax Previous words When it comes to responsive design, media query media is definitely inseparable. It is generally believed that media queries are new additions to CSS3. In fact, CSS2 already exists, and CSS3 adds new media attributes and usage scenarios (not supported by IE8-browser). This article will introduce the content of media inquiries in detail

Media type In CSS2, media queries are only used in and tags and exist as media attributes

The media attribute is used to specify different styles for different media types

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

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

Media Properties Media attributes are a new addition to CSS3. Most media attributes are prefixed with "min-" and "max-", which are used to express "less than or equal to" and "greater than or equal to". This avoids the use of " " characters that conflict with HTML and XML

[Note] Media attributes must be enclosed in brackets (), otherwise they will be invalid

All media attributes are listed in the table below

Specify the bit value of each pixel unit of the output device. If the device does not support output colors, the value is 0

Apply style sheets to all devices that can display colors

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

【2】Color index (color-index)

The color index specifies the number of entries in the color lookup table in the output device. If no color lookup table is used, the value is equal to 0

Apply the style sheet to all devices that use at least 256 index colors (the following code is not displayed, indicating that the return value is 0)

style > @media (min-color-index: 256) { .box{height : 100px ; width : 100px ; background-color : lightgreen ; } } style > div class ="box" > div > 【3】Aspect-ratio

The aspect ratio describes the aspect ratio of the target display area of the output device. The value consists of two positive integers separated by "/". Represents the ratio of the number of horizontal pixels (the first value) to the number of vertical pixels (the second value)

Apply style sheets to devices with square or widescreen viewing areas

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

【4】Device aspect ratio (device-aspect-ratio)

Device aspect ratio describes the aspect ratio of the output device. The value consists of two positive integers separated by "/". Represents the ratio of the number of horizontal pixels (the first value) to the number of vertical pixels (the second value)

Apply style sheets to special widescreen devices with an aspect ratio of 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

Device height describes the height of the output device

Apply a stylesheet to a document displayed on screen with a minimum height of 1000px

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

【6】Device width (device-width)

Device width describes the width of the output device

Apply a style sheet to a document displayed on a screen with a minimum width of 1000px

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

【7】Grid

Grid determines whether the output device is a grid device or a bitmap device. If the device is grid-based (such as a teletype terminal or a telephone that can only display one glyph), the value is 1, otherwise it is 0

Apply stylesheets to non-grid devices

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

【8】Height

Height describes the height of the rendering area of the output device (such as the height of the visual area or the height of the printer tray)

Apply style sheets to devices with a height greater than 800px in the visible area

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 rel ="stylesheet" href ="style.css" media ="print" >

div class ="box" > div > media并不是'print'，所以媒体查询为假。但是，style.css文件依然被下载

逻辑操作符 操作符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操作符表示仅在媒体查询匹配成功时应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用

[注意]经测试，无论是否使用only操作符都对结果无影响

style media ="only screen and (max-width:1000px)" > .box { width : 100px ; height : 100px ; background-color : pink ; } style > div class ="box" > div > 实际上，only、not、and和or(用逗号表示)这四种逻辑中，只有and比较常用

// <![CDATA[ var all = document.getElementById('cnblogs_post_body').children; var select = [];

for(var i = 1; i < all.length; i++){ if(all[i].getAttribute('id')){ if(all[i].getAttribute('id').match(/anchor\d+$/)){ select.push(all[i]); } }

} var wheel = function(e){ e = e || event; var data; if(e.wheelDelta){ data = e.wheelDelta; }else{ data = -e.detail * 40; } for(var i = 0; i 0){ return; } if(select[i].getBoundingClientRect().top 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }

} document.body.onmousewheel = wheel; document.body.addEventListener('DOMMouseScroll',wheel,false);

} oCon.children[i].onclick = function(){ change(this); } }

function change(_this){ for(var i = 2; i