详解CSS3中@media的实际使用
2015-08-04 18:36
627 查看
语法:
取值:
<sMedia>:
指定设备名称。
{sRules}:
样式表定义。
说明:
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).
常见写法:
@media screen and这是一种最常见的写法,后面跟上限定的屏幕尺寸
带all 跟 only的写法
一般all跟only都是对应在一起出现的
device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
用法:
@media :<sMedia> { sRules }
取值:
<sMedia>:
指定设备名称。
{sRules}:
样式表定义。
说明:
判断媒介(对象)类型来实现不同的展现。此特性让CSS可以更精确作用于不同的媒介类型,同一媒介的不同条件(分辨率、色数等等).
media_query: [only | not]? <media_type> [ and <expression> ]* expression: ( <media_feature> [: <value>]? ) media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed media_feature: width | min-width | max-width | height | min-height | max-height | device-width | min-device-width | max-device-width | device-height | min-device-height | max-device-height | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid
常见写法:
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/ .class { background: #ccc; } }
@media screen and这是一种最常见的写法,后面跟上限定的屏幕尺寸
带all 跟 only的写法
一般all跟only都是对应在一起出现的
@media all and (min-width:xxx) and (max-width:xxx){ /*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/ } @media only screen and (min-width:xxx) and (max-width:xxx){ /*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/ }
device-aspect-ratio
device-aspect-ratio可以用来适配特定屏幕长宽比的设备,这也是一个很有用的属性,比如,我们的页面想要对长宽比为4:3的普通屏幕定义一种样式,然后对于16:9和16:10的宽屏,定义另一种样式,比如自适应宽度和固定宽度:
用法:
@media only screen and (device-aspect-ratio:4/3)
相关文章推荐
- 使用CSS伪元素实现文字部分变色的方法
- CSS的display、hover、overflow、©(版权符号)、borer-radius(边框圆角)
- CSS 单行溢出文本显示省略号...的方法(兼容IE FF)
- css 设置上下左右三角形箭头
- 如何处理ul/ol下li左边有段空白的样式问题
- CSS的float与clear
- DIV_CSS布局问题:3个水平对齐布局的DIV,左右固定宽,中间宽度自动填充
- CSS的z-index(分层)
- CSS的position(位置)
- java实现树型结构样式
- CSS DIV垂直居中
- 针对不同的屏幕加载样式表
- div+css常见浏览器兼容问题以及解决办法
- html笔记04:在html之中导入css两种常见方法
- PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式
- CSS3的:not(:target)效果
- CSS 的黑科技
- css3新特性
- Css控制div水平垂直居中显示
- CSS背景