CSS3的@media用法

作者: deepwinter 分类: 前端 发布时间: 2019-06-05 10:10 点击量: 377 次阅读

语法

@media [and | not | only] mediatype and | not | only (media feature)  [and | not | only (media feature)] { css-code; }

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

这段代码的几个参数解释:

  • width = device-width
    宽度等于当前设备的宽度
  • initial-scale
    初始的缩放比例(默认设置为1.0)
  • minimum-scale
    允许用户缩放到的最小比例(默认设置为1.0)
  • maximum-scale
    允许用户缩放到的最大比例(默认设置为1.0)
  • user-scalable
    用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

媒体类型

类型 含义
all 所有媒体
aural 已废弃。用于语音和声音合成器
braille 已废弃。盲人用点字法触觉回馈设备
embossed 已废弃。盲文打印机
handheld 已废弃。便携设备,如PDA和小型电话
print 打印用纸或打印预览视图
projection 已废弃。各种投影设备
screen 电脑屏幕,平板电脑,智能手机等
speech 语音或音频合成器
tty 已废弃。使用固定密度字母栅格的设备,比如电传打字机和终端
tv 已废弃。电视机类型设备

关键字

and
且的含义
not
使用关键词not是用来排除某种制定的媒体类型,也就是用来排除符合表达式的设备。换句话说,not关键词表示对后面的表达式执行取反操作,如:

@media not print and (max-width: 1200px){样式代码}

上面代码表示的是:样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。
only
only用来定某种特定的媒体类型,很多时候是用来对那些不支持媒体特性但却支持媒体类型的设备。


media查询参数

下面是它的一些参数用法解释:

参数 含义
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率,例如:aspect-ratio:16/9
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0,例如:min-color:32就会检测设备是否拥有32位颜色
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率
device-height 定义输出设备的屏幕可见高度
device-width 定义输出设备的屏幕可见宽度
grid 用来查询输出设备是否使用栅格或点阵
height 定义输出设备中的页面可见区域高度
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率
max-color 定义输出设备每一组彩色原件的最大个数
max-color-index 定义在输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率
max-device-height 定义输出设备的屏幕可见的最大高度
max-device-width 定义输出设备的屏幕最大可见宽度
max-height 定义输出设备中的页面最大可见区域高度
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数
max-resolution 定义设备的最大分辨率
max-width 定义输出设备中的页面最大可见区域宽度
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率
min-color 定义输出设备每一组彩色原件的最小个数
min-color-index 定义在输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率
min-device-width 定义输出设备的屏幕最小可见宽度
min-device-height 定义输出设备的屏幕的最小可见高度
min-height 定义输出设备中的页面最小可见区域高度
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率
min-width 定义输出设备中的页面最小可见区域宽度
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度,例如:orientation:portrait竖屏,orientation:landscape横屏
resolution 定义设备的分辨率。例如:min-resolution:300dpimin-resolution:118dpcm
scan 定义电视类设备的扫描工序
width 定义输出设备中的页面可见区域宽度

实例

@media screen and (min-width: 1200px) {
        css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
        css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
        css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
        css-code;
}
@media screen and (max-width: 479px) {
        css-code;
}

参考文章:
https://www.runoob.com/cssref/css3-pr-mediaquery.html
https://www.jianshu.com/p/b8f375b52a61

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

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