css3 media媒体查询
类别:Web前端 浏览量:622
时间:2017-3-11 css3 media媒体查询
css3 media媒体查询@media媒体查询 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media媒体查询是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。
一、语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
二、mediatype媒体类型
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。 |
speech | 应用于屏幕阅读器等发声设备 |
三、关键字 not 、only
1、only:用来指定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
2、not:not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)
3、and:连接词
四、media feature设备特性值
值 | 描述 |
---|---|
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 | 定义输出设备中的页面可见区域宽度。 |
五、css3 media媒体查询实例
1、当页面小于960px的时候执行它下面的CSS
@media screen and (max-width: 960px){
body{
background: #000;
}
}
2、等于960px尺寸的时候执行它下面的CSS
@media screen and (max-device-width:960px){
body{
background:red;
}
}
3、大于960px尺寸的时候执行它下面的CSS
@media screen and (min-width:960px){
body{
background:orange;
}
}
4、当页面宽度大于960px小于1200px的时候执行下面的CSS
@media screen and (min-width:960px) and (max-width:1200px){
body{
background:yellow;
}
}
标签:css
您可能感兴趣
- css中width:auto和width:100%的区别
- CSS优雅降级和渐进增强
- CSS样式优化
- css3菜单特效(CSS3实现精美横向滚动菜单按钮)
- css 最高层级(浅谈CSS 权值 层叠 重要性!important)
- css43个基本技巧(必须掌握10个非常不错的CSS技巧)
- css时钟(网页中时光轴CSS实现)
- css3设置动画无限循环(css3 实现文字闪烁效果的三种方式示例代码)
- css中background属性介绍
- css 三级层级菜单(利用CSS3实现动态的二级三级菜单效果实例源码)
- css3编程实战(详解CSS3开启硬件加速的使用和坑)
- css什么时候可以用百分比(浅谈CSS中的百分比)
- 60个常用的css布局(CSS布局基础BFC)
- css圆角阴影代码(CSS实现曲面阴影效果的简单实例推荐)
- css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
- css实现水平垂直居中的方式有哪些(css让容器水平垂直居中的7种方式)
- 蓝底证件照怎么制作 证件照换底色 换尺寸快速搞定(蓝底证件照怎么制作)
- 你喜欢足球吗 足球如何点亮世界的(足球如何点亮世界的)
- 不可分鸽是什么梗(不可分鸽是什么梗)
- 古代的鸽子是爱情的象征,并非和平的使者(古代的鸽子是爱情的象征)
- 一课译词 放鸽子(一课译词放鸽子)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
热门推荐
- linux系统登录mysql数据库(Linux手动部署远程的mysql数据库的方法详解)
- mysqlbinlog优缺点(MySQL Binlog 日志处理工具对比分析)
- mysql允许远程访问docker(Docker部署mysql远程连接 解决2003的问题)
- html5canvas功能介绍(Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 附转换公式)
- vue创建项目同时引入elementui(Vue Element前端应用开发之开发环境的准备工作)
- HTML5 <abbr>标签
- react定时任务(手把手带你用React撸一个日程组件)
- LINQ中Aggregate的用法
- react动态创建菜单并实现局部刷新(使用react-virtualized实现图片动态高度长列表的问题)
- 常见的web富文本编辑器有哪些