CSS 中的@media
“media”就是用来指定特定的媒体类型,在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型,如屏幕(screen)和打印(print)的样式表,当然还有其他的,比如说“TV”,“handheld”等,其中“all”表示的是支持所有媒体介质。有关于更多的Media类型,可以点击这里。
CSS3中的Media Queries增加了更多的媒体查询,同时你可以添加不同的媒体类型的表达式用来检查媒体是否符合某些条件,如果媒体符合相应的条件,那么就会调用对应的样式表。换句简单的说,“在CSS3中我们可以设置不同类型的媒体条件,并根据对应的条件,给相应符合条件的媒体调用相对应的样式表”。现在最常见的一个例子,你可以同时给PC机的大屏幕和移动设备设置不同的样式表。这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/content/css3-media-queries © w3cplus.com
1、head标签中引入
//语法: @media mediatype and | not | only (media feature) { css-code; }
//也可以针对不同的媒体使用不同的stylesheets:
//语法: @media mediatype and | not | only (media feature) { css-code; }
//也可以针对不同的媒体使用不同的stylesheets: <!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">-->
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">
上面将浏览器宽度小于等于800px时,应用 styleA 。
2、css中引入
@media screen and (max-device-width:960px){body{background:red;}
}
上面是在设备屏幕宽度小于等于960px时应用css样式。
混用:
@media screen and (min-width:960px) and (max-width:1200px){body{background:yellow;}
}
表示浏览器宽度大于等于960px且小于等于1200px时使用样式。
3、Media所有参数汇总
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
color-index:检查设备颜色索引表中的颜色,他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
grid:检测输出的设备是网格的还是位图设备。
值 | 描述 |
aspect-ratio | 定义输出设备中的页面可见区域宽度与高度的比率 |
color | 定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0 |
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 | 定义输出设备中的页面可见区域高度是否大于或等于宽度(横竖屏)。 |
resolution | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | 定义电视类设备的扫描工序。 |
width | 定义输出设备中的页面可见区域宽度。 |
(max-width:599px)
(min-width:600px)
(orientation:portrait) 竖屏
(orientation:landscape) 横屏
(-webkit-min-device-pixel-ratio: 2) 像素比
4、媒体类型
值 | 描述 |
all | 用于所有设备 |
aural | 已废弃。用于语音和声音合成器 |
braille | 已废弃。 应用于盲文触摸式反馈设备 |
embossed | 已废弃。 用于打印的盲人印刷设备 |
handheld | 已废弃。 用于掌上设备或更小的装置,如PDA和小型电话 |
用于打印机和打印预览 | |
projection | 已废弃。 用于投影设备 |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
tty | 已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备 |
tv | 已废弃。 用于电视和网络电视 |
5、关键字
值 | 描述 |
and | |
not | 该关键字是用来排除某种制定的媒体类型 |
only | 用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有:支持媒体特性(Media Queries)的设备,正常调用样式,此时就当only不存在;对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备,这样就会不读了样式,因为其先读only而不是screen;另外不支持Media Qqueries的浏览器,不论是否支持only,样式都不会被采用。 |
6、参考文档:
http://www.w3cplus.com/content/css3-media-queries
http://css.doyoe.com/
CSS 中的@media相关推荐
- css中 media的用法,如何在css中正确使用@media
如何在css中使用@media作为特定分辨率?所以我想让我的侧栏更改取决于用户分辨率,所以我使用@media.如何在css中正确使用@media 这是示例代码: @media (max-width: ...
- css 网页自适应 @media screen详解
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小.只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 二话不说直接上代码 <!DOCTYPE h ...
- CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max
前言 现在 HTML5/CSS3 很流行罢,也是未来时代的趋势.在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢. 动画 animation 转化 transform 过 ...
- Css中calc, support, media各自的含义及用法
1.calc calc() 函数用于动态计算长度值. ● 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): ● 任何长度值都可以使用calc()函数 ...
- CSS中calc, support, media各自的含义及用法?
一 support 了解到了@support的这个属性,记录下: CSS中的@support主要是用于检测浏览器是否支持CSS的某个属性,其实就是条件判断,如果支持某个属性,你可以写一套样式,如果不支 ...
- css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
- 在CSS中如何使用 when/else
大家都知道CSS已经有@media.@support 查询形式的条件,可以非常灵活地选择对应的样式,然而还有一个新的提议叫做 when/else,这语法似乎看起来更加明了方便. 在这篇文章完稿前,wh ...
- 关于CSS中的字体尺寸设置 em rem等
常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸.一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative). 绝对单位在大多数情况下是相对于某些实际量度而言的 ...
- css 加随机数 引用_在CSS中生成随机数
Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发. Robin Rendle 于2017年1月11日 前几天,我遇到了一个特别有趣的问题.我想用random ...
- 设置最小值与最大值 css,一文学会使用 CSS 中的 min(), max(), clamp() 以及它们的使用场景...
作者:Ahmad shaded 译者:前端小智 来源:sitepoint点赞再看,微信搜索[大迁世界]关注这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub https://github. ...
最新文章
- MS SQL Server存储过程
- Android studio 另一个程序正在使用此文件,进程无法访问
- tf.keras遇见的坑:Output tensors to a Model must be the output of a TensorFlow `Layer`
- 在一个TextArea中如何限制行数和字符数
- Hive自定义UDF和聚合函数UDAF
- 悟懂MapReduce,不纠结!
- 浅谈权限(功能权限数据权限)
- AIX5.3安装oracle10g
- Windows Server 2016上具有Docker容器SQL Server
- PHP导出MySQL数据到Excel文件
- ATtiny85 制作迷你小游戏机
- Python实现逆Radon变换——直接反投影和滤波反投影
- 塞力斯是鸿蒙系统吗,赛力斯“驼峰”智能增程系统为何物?一亮相就引起行业沸腾...
- 东芝推出具备限流器检测功能的有刷直流电机驱动器IC
- QQ Account
- 日期操作类和io机制
- springboot基于web的传染病信息管理系统的设计与实现毕业设计-附源码221124
- 【附源码】Java计算机毕业设计安卓和悦少年文明礼仪监管APP(程序+LW+部署)
- 7-1 软硬车厢交替排列 (13 分)
- Python实现手机号自动判断男女性别
热门文章
- 在波点音乐听周杰伦新歌专辑,一起“用音乐穿越”
- chrome下载速度慢,手把手教学
- 谷歌发布研究人口流动性的新方法【智能快讯】
- 我终于有自己的专业技术博客了
- 基于at89c51单片机的led数字倒计时器设计c语言,基于AT89C51单片机的LED数字倒计时器设计.docx...
- 来,看看记事本里会变成乱码的字……不仅仅是“联通”而已……
- 远程控制计算机无法粘贴,Windwos服务器远程桌面不能复制粘贴的解决方法
- 玩qq游戏提示计算机内存不足,电脑游戏提示内存不足怎么办
- 自动加减工单结存算法实现
- 加减乘除等符号大全中英对照,在英语中的用法