这是我参与更文挑战的第7天,活动详情查看: 更文挑战
属性简介
- 基于一个或多个 媒体查询 的结果来应用样式表的一部分。就是可以根据不同的媒体类型定义不同的样式。
- 当页面需要响应式布局时,
@media
是非常有用的。因为浏览器重置大小时,页面也会根据浏览器的宽度和高度重新渲染页面,使@media
重新计算是否加载样式。 样例:
/* screen 当设备是 电脑屏幕,平板电脑,智能手机等。并且 width > 900px 使用 .article 样式块 */
@media screen and (min-width: 900px) {
.article {
padding: 1rem 3rem;
}
}
@media
规则可置于您代码的顶层或位于其它任何@条件规则组
内。
媒体类型
- 描述了设备的类别。媒体类型是可选的,默认是
all
类型。
all
所有设备上都加载。print
在打印预览模式下在屏幕上查看的分页材料和文档中加载。screen
电脑屏幕,平板电脑,智能手机等,中加载。speech
屏幕阅读器等发声设备中加载。
CSS2.1和媒体查询3
定义了几种其他媒体类型(tty,tv,projection,handheld,braille,embossed,和aural)
,现在基本上已经弃用。
逻辑运算符
- 逻辑运算符
not
,and
以及only
可以被用于组成一个复杂的媒体查询。还可以通过用逗号分隔多个媒体查询来将它们合并为一个规则。
not
用于媒体查询取反值,如果媒体查询返回false
,则返回true
。如果出现在以逗号分隔的查询列表中,它只会在当前范围中取反。如果使用not
运算符,还必须指定媒体类型。
/* 在 screen 类型 加载 */
@media screen {
.box {
background-color: red;
}
}
/* 取反 */
@media not screen {
.box1 {
background-color: red;
}
}
and
用于将多个媒体特征组合到一个媒体查询中。它还用于将媒体功能与媒体类型连接起来。
/* 在 screen 类型 大于560px 加载 */
@media screen and (min-width: 560px) {
.box {
background-color: red;
}
}
/* 在 screen 类型 大于560px 小于 700px 加载 */
@media screen and (min-width: 560px) and (max-width: 700px) {
.box1 {
background-color: burlywood;
}
}
only
是为了在不支持媒体查询的浏览器中不添加样式。浏览器处理以only
开头的关键词时将会忽略only
。
@media only screen{
.box {
background-color: red;
}
}
// 浏览器中等同于
@media screen{
.box {
background-color: red;
}
}
, (逗号)
逗号用于将多个媒体查询组合成一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此,如果列表中的任何查询为真,则整个媒体语句返回真。换句话说,列表的行为就像一个逻辑or运算符。
/* 在 screen 类型 小于240px 或 大于240px 加载 */
@media screen and (min-width: 560px), (max-width: 240px) {
.box {
background-color: red;
}
}
/* 在 screen 类型 小于 240px 或 大于360px 小于 700px 加载 */
@media screen and (max-width: 240px), (min-width: 360px) and (max-width: 700px) {
.box1 {
background-color: burlywood;
}
}
媒体功能
- 根据属性判断当前使用
css
所在的设备,或是浏览环境的具体特征。表达式是可选的,它负责判断这些特性或特征是否存在、值为多少。每条媒体特性表达式都必须用括号括起来。 常用媒体:
height
输出设备中的页面可见区域高度。width
输出设备中的页面可见区域宽度。max-aspect-ratio
输出设备的屏幕可见宽度与高度的最大比率。max-device-aspect-ratio
输出设备的屏幕可见宽度与高度的最大比率。max-device-height
输出设备的屏幕可见的最大高度。max-device-width
输出设备的屏幕最大可见宽度。max-height
输出设备中的页面最大可见区域高度。max-width
输出设备中的页面最大可见区域宽度。min-height
输出设备中的页面最小可见区域高度。min-width
输出设备中的页面最小可见区域宽度。
其他加载方式
style
标签上加载
<style media="(min-width: 500px)">
.box {
background-color: red;
}
</style>
<style media="(max-width: 500px">
.box {
background-color: burlywood;
}
</style>
- 根据
media属性
定义的媒体查询判断加载那个样式。
@import 使用时加载
@import url(./index.css) (min-width:350px);
@import url(./home.css) (max-width:750px);
- 在加载最后添加
()
定义媒体查询判断加载那个样式。
<picture>
标签
<picture>
<source media="(min-width: 650px)" srcset="demo1.jpg">
<source media="(min-width: 465px)" srcset="demo2.jpg">
<img src="img_girl.jpg">
</picture>
- 根据屏幕匹配的不同尺寸显示不同图片,如果没有匹配到或浏览器不支持
picture
属性则使用img
元素: