CSS3的media query学习培训功略

日期：2021-01-20 类型：科技新闻我要分享

关键词：微信公众号平台小程序，微信打分小程序，小程序发布，小程序大全，微信小程序编程

1个新闻媒体查寻（media query）包括1个新闻媒体种类（media type）和最少1个表述式，用新闻媒体特点限定款式表的功效范畴。
英语的语法

新闻媒体查寻包括1个新闻媒体种类(media type)和1个到好几个检测新闻媒体特点(media feature)的表述式，表述式和新闻媒体种类将依据具体状况测算的到true或false。假如特定的新闻媒体种类合乎当今机器设备而且新闻媒体特点表述式都为真，那当今新闻媒体查寻为真。

当1个media query为true时，对应的款式表依照一切正常款式标准起效。特定了media query的<link>中的款式自始至终会免费下载。

除非应用了not或only实际操作符，media type是可选的，默认设置值为all。
逻辑性运算符
and：用于融合好几个新闻媒体特点(media feature)到1个media query

仅有全部feature表述式为真且考虑新闻媒体种类时全部media query才为真。

下列是1个简易media query，用于检验media type为all时的1个media feature：

CSS Code拷贝內容到剪贴板

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

当大家必须加上限定标准是，可使用and进行目地以下：

CSS Code拷贝內容到剪贴板

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

上面的media query仅有在viewport超过700px而且width &bt; height时起效。此时假如必须限定新闻媒体种类为五颜六色电脑上显示信息器，可使用and加上media type以下：

CSS Code拷贝內容到剪贴板

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

,逗号运算符：用于融合好几个media query，任1media query为true时运用款式。

逗号运算符非常于逻辑性运算符中的or。逗号隔开的每个media query都必须开展独立求值，应用在某1个media query上的别的运算符不容易危害到别的media query。

假如必须在超过700px宽的全部机器设备或宽度超过高宽比的五颜六色电脑上显示屏上运用款式，可使用以下标准：

CSS Code拷贝內容到剪贴板

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

not：用于对全部media query結果取反,务必坐落于1个media query的开始

在逗号隔开的好几个media query中，not只对它功效的media query起效。not不可以对单独media feature取反，只能功效于全部media query

例1：以下面的not将在最终求值：

CSS Code拷贝內容到剪贴板

@media not all and (monochrome) {}

等额的于下面的query：

CSS Code拷贝內容到剪贴板

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

例2：下面的好几个media query求值

CSS Code拷贝內容到剪贴板

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

求值次序以下：

CSS Code拷贝內容到剪贴板

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

only：用于向初期访问器掩藏新闻媒体查寻，only务必坐落于media query的开始

CSS Code拷贝內容到剪贴板

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

没法鉴别新闻媒体查寻的访问器规定得到逗号切分的新闻媒体种类目录，标准规定：它们应当在第1个并不是连标识符的非数据、字母以前断开每一个值。因此上面的示例解释为：

CSS Code拷贝內容到剪贴板

@media only {}

由于沒有only这样的新闻媒体种类，因此款式表被忽视。假如不加only，下面的示例

CSS Code拷贝內容到剪贴板

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

被分析为@media screen {}这样1来即便访问器不知道道media query的真实含意，款式也会运用于全部显示屏机器设备。悲剧的是，IE6⑻未能正的确现该标准。沒有将款式运用到全部显示屏的机器设备，它将全部款式表忽视掉。

虽然存在此个人行为，假如期待向别的不太常见的访问器掩藏款式，任然提议在新闻媒体查寻前面加上only。
新闻媒体种类（media type）

    all：可用与全部机器设备
    print：paged material and documents viewed on screen in print previe mode.
    screen: 五颜六色电脑上显示信息器
    speech：intended for speech synthesizers

留意：CSS2.1和CSS3 media query界定了tty, tv, projection, handheld, braille, embossed, aural这些media type，可是它们在media queries 4 中都废料了，因此不强烈推荐应用了
新闻媒体特点（media feature）

下面是1些media feature，并不是所有

    width： viewport width
    height: viewport height
    aspect-ratio: viewport的宽高例如：16/9
    orientation: 宽度和高宽比的尺寸关联。。
    resolution: pixel density of the output device
    scan: scanning process of the output device
    grid: is the device a grid or bitmap
    color: number of bits per color component of the output device, or zero if the device isn't color
    color-index: number of entries in the output device's color lookup table, or zero if the device does not use such a table

media query常见方式
排他（exclusive）

为保证在某1个标准下仅有1个款式表起效，将查寻标准严苛区划，以下面：

CSS Code拷贝內容到剪贴板

@media (max-width: 400px) {
html {
background: red;
}
}
@media (min-width: 401px) and (max-width: 800px) {
html {
background: green;
}
}
@media (min-width: 801px) {
html {
background: blue;
}
}

遮盖（overriding）

能够对元素设定同样优先选择级，应用款式次序，根据遮盖，防止排他

CSS Code拷贝內容到剪贴板

@media (min-width: 400px) {
html {
background: red;
}
}
@media (min-width: 600px) {
html {
background: green;
}
}
@media (min-width: 800px) {
html {
background: blue;
}
}

无线网络端优先选择（Mobile first）

默认设置款式假定为挪动机器设备宽度，随后根据min-width操纵拓展款式

CSS Code拷贝內容到剪贴板

html {
background: red;
}
@media (min-width: 600px) {
html {
background: green;
}
}

PC优先选择（desktop first）

默认设置以宽屏开展款式设定，根据max-width操纵款式遮盖

CSS Code拷贝內容到剪贴板

html {
background: red;
}
@media (max-width: 600px) {
html {
background: green;
}
}

上一篇：记牢CSS中的10个“不必” 返回下一篇：没有了