HTML & CSS · 开发相关 · 折腾

Media Query 学习笔记

Media Query 简介

Media Query 即媒体查询,借助其可实现响应式设计。Meidia Queries,该网站收集了很多优秀的 RWD(Responsive web design) 的网站。

在 HTML4 和 CSS2 只支持对于不同的媒体类型来设置样式,而 Media Query 扩充了 Media Type 的功能,并且使我们能够更精准的应用样式表。

浏览器兼容性

浏览器 IE Edge Firefox Chrome Safari
版本 8+ ? 21 3.5 4

Polyfill

浏览器向下兼容可用该库:respond.js

媒体类型 Media Type

W3C共列出了10中媒体类型。

类型 解释
all 所有设备
screen 彩色电脑屏幕
speech 语音合成器
print 文档打印或打印预览模式
braille 盲文
embossed 盲文打印
handheld 手持设备
projection 项目演示,比如幻灯
tty 固定字母间距的网格的媒体,比如电传打|字机
tv 电视

注意:CSS2.1 和 CSS3 media query 定义了tty, tv, projection, handheld, braille, embossed, aural 这些 media type,但是它们在 media query 4 中都废弃了,所以不推荐使用了。

属性(Media Feature)

属性 MIN/MAX前缀 描述
color 整数 yes 每种色彩的字节数
color-index 整数 yes 色彩表中的色彩数
aspect-ratio 整数/整数 yes 宽高的比值
device-aspect-ratio 整数/整数 yes 宽高比例
device-width length yes 设备屏幕的输出宽度
device-height length yes 设备屏幕的输出高度
grid 整数 no 是否是基于格栅的设备
width length yes 渲染界面的宽度
height length yes 渲染界面的高度
monochrome 整数 yes 单色帧缓冲器中每像素字节
resolution 分辨率(“dpi/dpcm”) yes 分辨率
scan Progressive interlaced no tv媒体类型的扫描方式
orientation Portrait/landscape no 横屏或竖屏

color 与 color-index

color 描述的是设备的色彩深度,如果设备不是彩色设备,则值为 0,黑白设备的话就是 1

color-index 指色指数,至于什么是色指数,请看这里,反正我看完维基百科的词条后,觉得这辈子用上这个属性的概率基本为零。

orientation

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

aspect-ratio 与 device-aspect-ratio

device-aspect-ratio 定义的是 device-widthdevice-height 的比值,而 aspect-ratio 定义的是 widthheight 也就是 viewport 的宽高比值,该属性在应付 Android 设备很有效。

比如,具有1280*720像素的设备(也就是“16:9”),则以下媒体查询全都是匹配的:

@media screen and (device-aspect-ratio: 16/9) { … }
@media screen and (device-aspect-ratio: 32/18) { … }
@media screen and (device-aspect-ratio: 1280/720) { … }
@media screen and (device-aspect-ratio: 2560/1440) { … }

引入方式

link 方法引入

<link rel="stylesheet" type="text/css" media="all and (max-width: 600px)" href="style.css" />

XML 方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ?>

@import 方式引入

<style>
    @import url("style/print.css") print;
    @import url(style/style.css) screen; 
</style>

不过我们应该尽量避免使用 @import 语法。

@media 方式引入

@media screen and (max-width: 1920px) {
    /* CSS Rules used when query matches */
}

style 方式引入

<style type="text/css" media="screen and (max-width: 1920px)">
    /* CSS Rules used when query matches */
</style>

逻辑运算符

各个条件可以用逻辑运算符号连接起来。

and 关键词

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。

<style>
    /*这两者是等价的*/
    @media (max-width: 1920px) and (min-width: 1366px) {    
        /* CSS Rules used when query matches */
    } 
</style>

Or 关键字

媒体查询中使用逗号分隔效果等同于 or 逻辑操作符。当使用逗号分隔的媒体查询时,如果任何一个媒体查询返回真,样式就是有效的。逗号分隔的列表中每个查询都是独立的,一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

or,的作用是等价的,个人建议用,,比较容易辨识。

<style>
    /*这两者是等价的*/
    @media (max-width: 1920px),(min-width: 1366px) {
        /* CSS Rules used when query matches */
    } 
    @media (max-width: 1920px)or(min-width: 1366px) {
        /* CSS Rules used when query matches */
    }
</style>

not 关键字

not 关键字是用来排除某种制定的媒体类型。not 是对整个 media query 进行否定,不能对单个 media feature 否定。

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

/* 等同于 */
@media (not (screen and (color))), print and (color) {}

only 关键字

用来定某种特别的媒体类型。对于支持 media query 的移动设备来说,如果存在only 关键字,移动设备的浏览器会忽略 only 关键字并直接根据后面的表达式应用样式文件。对于不支持 media query 的设备但能够读取 media type 类型的浏览器,遇到 only 关键字时会忽略这个样式文件。

另外 only 必须位于 media query 的开头。

参考资料

Tagged: ,

发表评论

电子邮件地址不会被公开。 必填项已用*标注