CSS3属性之Media Queries
2016-12-07 13:24
387 查看
Media Queries属性在做响应式布局的时候功不可没,如果做过响应式,对下面的写法一定很熟悉:
其中包含了媒体的引入方式、逻辑操作符、媒体类型(Media Type)、媒体特性(Media Query)等,下面来详细的看下这些属性。
媒体的引入方式:
1)link方法引入(html文件head中)
2)@media引入(css代码中)
3)xml方式引入(xml文件中)
4)@import方式引入(css代码中)
注:其中1-2是工作中经常用到的,另外如果以引入文件的形式引入css,即使媒体查询返回假,css仍会被加载。
逻辑操作符
操作符 and ',' only not 可以用来构建复杂的媒体查询,具体如下:
and 操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中,只有当每个属性都为真时,这条查询的结果才为真。
',' 操作符将多个媒体查询以逗号分隔放在一起,只要其中任何一个为真,整个媒体语句就返回真。相当于 or 操作符。
not 操作符用来对一条媒体查询的结果进行取反。
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。例如以下代码,在不支持Media Query的浏览器中则不会引入example.css。
注:若使用了 not 或 only 操作符,必须明确指定一个媒体类型。
媒体类型(Media Type)
注:W3C规定了10中媒体类型,但是大部分浏览器实现的和我们经常用的为all、screen、print三种。
媒体特性(Media Query)
常用的一些Media Queries代码片段
Bootstrap3.0中的Media Queries片段
判断设备横竖屏
Media Queries的兼容性:(来自http://caniuse.com)
@media screen and (min-width: 320px) { … }
其中包含了媒体的引入方式、逻辑操作符、媒体类型(Media Type)、媒体特性(Media Query)等,下面来详细的看下这些属性。
媒体的引入方式:
1)link方法引入(html文件head中)
<link rel="stylesheet" href="style.css" media="screen and (min-width: 320px)" />
2)@media引入(css代码中)
@media screen and (min-width: 320px) { … }
3)xml方式引入(xml文件中)
<?xml-stylesheet rel="stylesheet" href="style.css" media="screen and (min-width: 320px)" ?>
4)@import方式引入(css代码中)
@import url(style.css) screen and (min-width: 320px);
注:其中1-2是工作中经常用到的,另外如果以引入文件的形式引入css,即使媒体查询返回假,css仍会被加载。
逻辑操作符
操作符 and ',' only not 可以用来构建复杂的媒体查询,具体如下:
and 操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中,只有当每个属性都为真时,这条查询的结果才为真。
@media srccen and (min-width: 320px) and (max-width: 480px) { … }
',' 操作符将多个媒体查询以逗号分隔放在一起,只要其中任何一个为真,整个媒体语句就返回真。相当于 or 操作符。
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not 操作符用来对一条媒体查询的结果进行取反。
@media not screen and (color), print and (color)
@media (not (screen and (color))), print and (color) /* 等同上一行代码 */
only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。例如以下代码,在不支持Media Query的浏览器中则不会引入example.css。
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
注:若使用了 not 或 only 操作符,必须明确指定一个媒体类型。
媒体类型(Media Type)
媒体类型 | 版本 | 兼容性 | 简介 |
---|---|---|---|
all | CSS2 | 所有浏览器 | 用于所有媒体设备类型 |
aural | CSS2 | Opera | 用于语音和音乐合成器 |
braille | CSS2 | Opera | 用于触觉反馈设备 |
handheld | CSS2 | Chrome,Safari,Opera | 用于小型或手持设备 |
CSS2 | 所有浏览器 | 用于打印机 | |
projection | CSS2 | Opera | 用于投影图像,如幻灯片 |
screen | CSS2 | 所有浏览器 | 用于计算机显示器 |
tty | CSS2 | Opera | 用于使用固定间距字符格的设备。如电传打字机和终端 |
tv | CSS2 | Opera | 用于电视类设备 |
embossed | CSS2 | Opera | 用于凸点字符(盲文)印刷设备 |
媒体特性(Media Query)
媒体特性 | 取值 | 接受min/max | 简介 |
---|---|---|---|
width | <length> | yes | 定义输出设备中的页面可见区域宽度 |
height | <length> | yes | 定义输出设备中的页面可见区域高度 |
device-width | <length> | yes | 定义输出设备的屏幕可见宽度 |
device-height | <length> | yes | 定义输出设备的屏幕可见高度 |
orientation | portrait | landscape | no | 定义'height'是否大于或等于'width'。值portrait代表是,landscape代表否 |
aspect-ratio | <ratio> | yes | 定义'width'与'height'的比率 |
device-aspect-ratio | <ratio> | yes | 定义'device-width'与'device-height'的比率。如常见的显示器比率:4/3, 16/9, 16/10 |
color | <integer> | yes | 定义每一组输出设备的彩色原件个数。如果不是彩色设备,则值等于0 |
color-index | <integer> | yes | 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0 |
monochrome | <integer> | yes | 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0 |
resolution | <resolution> | yes | 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm |
scan | progressive | interlace | no | 定义电视类设备的扫描工序 |
grid | <integer> | no | 用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值,1代表是,0代表否 |
Bootstrap3.0中的Media Queries片段
/* Extra small devices (phones, less than 768px) */ @media (max-width: 767px) /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) and (max-width: 991px) /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) and (max-width: 1199px) /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px)
判断设备横竖屏
/* portrait */ @media screen and (orientation:portrait) /* landscape */ @media screen and (orientation:landscape)
Media Queries的兼容性:(来自http://caniuse.com)
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- CSS3结合fontawesome字体实现自定义单选框复选框效果
- 新时代编辑神器:Atom
- 如何使用CSS3画出一个叮当猫
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- CSS3 3D 技术手把手教你玩转
- jQuery+HTML5+CSS3制作支持响应式布局时间轴插件
- jQuery CSS3相结合实现时钟插件
- CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
- CSS3实例分享之多重背景的实现(Multiple backgrounds)
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案