媒体查询(-@media)的用法详解
媒体查询(-@media)的用法详解
媒体查询可以用来干什么?
@media的作用:媒体查询可以在指定的设备上使用对应的样式替代原有的样式。
可以简单理解为:告诉浏览器,当满足某条件时,调用某样式。当满足条件A时,调用A样式; 当满足条件B时,调用B样式。
检测
1.viewport(视窗) 的宽度与高度
2.设备的宽度与高度
3.朝向 (智能手机横屏,竖屏) 。
4.分辨率等等
语法和操作符
语法一:内联@media
@media 查询条件表达式{ CSS样式 }
例:
@media not|only mediatype and (expressions) {...}
媒体查询由多媒体组成,可以包含一个或多个表达式,根据表达式条件判断是否成立,返回 true 或 false。
如果指定的多媒体类型匹配设备类型则返回查询结果为true,文档会在匹配的设备上显示指定样式效果。
可以使用操作符’not’或 ‘only’ 或’and’或,限定。
and:表示并且,要求必须满足所有的表达式要求时,才能使用media定义样式。
not:不,表示除…外,即排除掉某些特定的设备的,如 @media not print(非打印设备)。
注意:'not’针对的是一整条媒体查询语句,而非其中的某一个条件。
例:
@media not print and(max-width:1024px){...}
/* 或者 */
@media not(print and (max-width:1024px)){..}
only: 表示只有 仅仅,表示某一种的媒体类型设备。
注意:对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
,:多个条件设定使用逗号分隔,表手或者or,满足其中之一。
语法二:外链 media属性
例:
<link media=“查询条件表达式” />
除了上述格式,也可以在不同的媒体上使用不同的样式文件,使用link外联引入:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
媒体类型(mediatype)
1.print 打印机
2.screen 电脑屏幕,平板,智能手机等。
3.speech语音合成器等发声设备
4.all 用于所有多媒体类型设备(默认)
常见媒体特性(属性)
1.color颜色
2.color-index 颜色索引
3.aspect-ratio指定设备视口区域的宽高比
例:
@media only screen and (min-aspect-ratio:16/9){...}
4.device-aspect-ratio设备屏幕宽高比
5.device-height设备屏幕高度
6.device-width设备屏幕宽度
7.grid网格栅格
8.scan扫描
9.height高度
10.monochrome黑白
11.orientation方向,横屏landscape还是竖屏portrait
例:
@media (orientation:landscape){h1:before{content: '现在是横屏效果';color:green;}
}
@media (orientation:portrait){h1:before{content: '现在是竖屏效果';color:gold;}
}
12.resolution设备的分辨率范围 分辨率(dpi),分辨率倍数(dppx)
例:
@media screen and (resolution:2dppx){...}
@media screen and (resolution:3dppx){...}
@media screen and (min-resolution:2dppx){...}
13.width视口宽度 终端设备对页面的渲染区域
视口就是通常我们定义移动端头部meta的viewport。
注意:在浏览器窗口中,视口不包括滚动条、顶部或底部工具栏、菜单的部分。
例:
/* 在屏幕可视窗口尺寸大于 480 像素的设备上修改背景颜色 */
@media screen and (min-width:480px){body{background-color:lightgreen;}
}/* 在屏幕可视窗口尺寸大于 500 像素时将菜单浮动到页面左侧 */@media screen and (min-width:500px){#leftsidebar{width:200px;float:left;} #main{margin-left:200px;}
}
注:以上几乎所有的属性都可以使用【min-】和【max-】前缀做限定 (grid、scan和orientation除外)
max-color:最大颜色
max-color-index:最大颜色索引
max-aspect-ratio:最大宽高比
max-device-aspect-ratio:最大设备屏幕宽高比
max-device-height:设备屏幕的最大高度
max-device-width: 设备屏幕的最大宽度
max-height: 最大高度
max-monochrome:每个像素的最大单色原件个数
max-resolution:最大分辨率
max-width:最大宽度
min-color:最小颜色
min-color-index:最小颜色索引
min-aspect-ratio:最小宽高比
min-device-aspect-ratio:最小设备屏幕宽高比
min-device-height:设备屏幕的最小高度
min-device-width: 设备屏幕的最小宽度
min-height: 最小高度
min-monochrome:每个像素的最小单色原件个数
min-resolution:最小分辨率
min-width:最小宽度
媒体查询(-@media)的用法详解相关推荐
- vscode使用rem、媒体查询@media(图文详解,代码展示)
rem适配布局 一.rem单位 em是相对于父元素的字体大小来说的,例:父亲的font-size:10px,孩子的width:10em表示是100px: rem是相对于html的字体大小,例: ...
- 媒体查询(@media语法、案例)详解
媒体查询 @media 语法 1. 直接写在 CSS 样式中 2. 针对不同的媒体设备,从外部链入不同的 stylesheets(外部样式表) 使用 @media 实现网页变色龙 @media 语法 ...
- java metadata 使用_java 查询oracle数据库所有表DatabaseMetaData的用法(详解)
一 . 得到这个对象的实例 Connection con ; con = DriverManager.getConnection(url,userName,password); DatabaseMet ...
- oracle中的exists 和 not exists 用法详解
from:http://blog.sina.com.cn/s/blog_601d1ce30100cyrb.html oracle中的exists 和 not exists 用法详解 (2009-05- ...
- java list用法_java list的用法详解
java list的用法详解 java中可变数组的原理就是不断的创建新的数组,将原数组加到新的数组中.以下是百分网小编搜索整理的关于java list的用法详解,需要的朋友可以参考一下!想了解更多相关 ...
- SVN switch 用法详解 (ZZ)
SVN switch 用法详解 (ZZ) http://www.cnblogs.com/dabaopku/archive/2011/05/21/2052820.html 确实,以前不会用switch ...
- escape mysql_MySQL中ESCAPE关键字的用法详解
MySQL转义 转义即表示转义字符原来的语义,一个转义字符的目的是开始一个字符序列,使得转义字符开头的该字符序列具有不同于该字符序列单独出现时的语义. MySQL中,转义字符以"" ...
- python字典的用法_Python字典的用法详解(附示例)
本篇文章给大家带来的内容是关于Python字典的用法详解(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 字典的表现形式为:{key:value},键和值之间用冒号分隔,每个 ...
- C#中NameValueCollection类用法详解
C#中NameValueCollection类用法详解,1.NameValueCollection类集合是基于 NameObjectCollectionBase 类. 但与 NameObjectCol ...
最新文章
- 读书笔记 - 《21世纪的管理挑战》
- WIN7 下安装 SQL Server 2000 兼容性问题
- 地图定义一个中间不动标注_高精度地图制作(三)
- SQL开发技巧 join从句
- 数据结构:线性数据结构(4)-列表(栈,队列,deques, 列表)
- IntelliJ IDEA for Mac 项目窗口详解(Project Windows)
- Linux 命令之 head -- 在屏幕上显示指定文件的开头若干行/显示文件开头内容/查看文件开头内容
- 常用正则表达式(?i)忽略字母的大小写!
- python3基础知识一
- SQL Server删除语句
- 子元素margin-top为何会影响父元素?
- tp5 + layui 上传图片[支持单张和多张 ]
- Android eclipse unable to launch:The selection can not be launched,and there are no recent launches
- informatic 使用注意事项
- 无法打开ONEDRIVE的解决方法【等待验证】
- CentOS 7.4安装配置Oracle 12cR2 12.2.0.1.0
- typescript常用编译结果函数__decorate、__matadata、__param、__awaiter
- 51单片机:1602液晶显示屏
- 蓝桥杯摔手机测试次数
- ImageNet 1000个类 具体内容