/ css

css3笔记——定义css设备类型-Media Queries

最近在学习和使用twitter bootstrap框架,涉及到响应式布局,因此将css3的设备类型相关知识整理下。

css2.1中也可以为不同的设备设计不同的css,通过

or

开定义不同设备的css,但是只有很少的设备支持。

而随着移动互联网的兴起,css3提出了媒体查询Media Queries 的概念。

Media Queries可以获得

  • 浏览器窗口的宽和高
  • 设备的宽和高
  • 设备的手持方向,横向还是竖向
  • 分辨率

@media的用法介绍

语法为@media: {sRules }

:指定设备名称,

  • all
  • aural 语音和音乐合成器
  • Braille 触觉反馈设备
  • embossed 凸点字符(盲文)印刷设备
  • handheld 小型或者手提设备
  • print 打印机
  • projection 投影图像,如幻灯片
  • tty 使用固定间距字符格的设备,如某些终端设备
  • tv 电视类设备

{sRules}:定义样式表

media_query: [only | not ]? <media_type> [ and ] * expression: ( <media_feature> [: ]?) media_type: all | aural | braille | handheld | print | project | 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_query 设置逻辑关键字,and、not、only
  • media_type 设置设备类型
  • media_feature 定义媒体特性,特性放置在圆括号。

详细的Media Queries 媒体特性说明

[![media-queries](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/09/media-queries.jpg "media-queries")](https://oeuys8rx2.qnssl.com/wp-content/uploads/2012/09/media-queries.jpg)media-queries
至于浏览器支持,ie9以及其一下不支持,FF从3.5开始支持,opera 从9.63开始支持,chrome和safari 支持。

最后注意得是

1.关键词 only的用处为:对于不支持Media Queries但是认识Media type的浏览器(譬如ie8只支持@media screen)进行样式屏蔽

譬如

@media only screen and (max-width:1024px) { }

的样式代码对于上述浏览器因为不认识only(only在screen前面)所以忽略后面所带样式。

2.media Queries 也支持外部css的引入

@import url(color.css) screen and (min-width:1000px)