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
您可能感兴趣
- 用css3实现阴影(CSS3中文字镂空、透明值、阴影效果设置示例小结)
- css样式为什么要有空格(css几种解决inline-block间隙的方案整理)
- CSS中overflow的用法
- css垂直左右居中的方式(css常用元素水平垂直居中方案)
- css瀑布流布局
- css中margin什么意思(CSS margin全面了解)
- filter的用法css(CSS filter 有什么神奇用途)
- CSS font-family
- css三种布局模式(CSS实现等分布局的4种方式)
- css !important的用法
- 怎么用html做一个导航栏(html+css 实现简易导航栏功能)
- css3项目列表属性(像素密度与CSS3的viewport在移动端Web响应式布局中的运用)
- css3渐变动画(CSS3径向渐变radial-gradient实现波浪边框和内倒角的方法)
- css3常用特性(css3学习之2D转换功能详解)
- css背景的属性有哪些(简述CSS中的背景属性background)
- js和css哪个重要(js与css的阻塞问题详析)
- 红色代表什么(红色代表什么寓意)
- 蓝天代表什么(蓝天代表什么生肖)
- 今天要吃什么(今天要吃什么菜)
- 营养餐是什么(学校营养餐是什么)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
热门推荐
- serv-u怎么用web登录(serv-u服务器的管理方法与功能分析)
- vue router用法(如何在Vue 3中扩展Vue Router链接详解)
- docker容器设置网站(docker容器中布置静态网站的实现)
- python元组和列表的定义(Python基本数据结构与用法详解列表、元组、集合、字典)
- Web安全色
- mysql根据子节点查询父节点(mysql 递归查找菜单节点的所有子节点的方法)
- php7.4类型属性实例详解(PHP 7.4中使用预加载的方法详解)
- sql中exists怎么用(SQL中Exists的用法)
- dedecms版本介绍(解决更换PHP5.4以上版本后Dedecms后台登录空白问题的方法)
- docker查看镜像详细内容(Docker镜像分析工具dive原理解析)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9