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}:定义样式表

mediaquery: [only | not ]? [ and ] * expression: ( [: ]?) mediatype: 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-queriesmedia-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)

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus