详解：CSS3 响应式布局 Media Queries 媒体查询

css3 响应式布局定义

响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化

响应不同的设备

涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询”

Media Queries 用法如下:

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />

或者另外一种引入css 文件的方法

<style type="text/css" media="screen">
   @import url("css/style.css");
 </style>

上面都直接在引用的 css 文件引用中使用 media 标识

media 标识是什么

通常来讲,media 是指设备类型 media_type 对应的有下面几种

1. • all 所有设备
2. • aural 听觉设备
3. • braille 点字触觉设备
4. • handled 便携设备,如 手机,平板电脑
5. • print 打印预览图等
6. • projection 投影设备
7. • screen 显示器,笔记本,移动端等设备
8. • tty 如打字机或终端等设备
9. • tv 电视机等设备
10. • embossed 盲文打印机

所以,我们在上面的 style 文件中定义了 media_type="screen"

就是指当你的设备是 显示器,笔记本,移动端的时候,加载此 css 样式文件

Media Queries 的另外一种用法:

在样式定义时,指定 Media type 类型

@media screen and (max-width:1024px){
    .background {
        background:#fff;
    }
}

上面的样式定义前使用 @media 属性来指定 media_type 是 screen

这里注意,除了限制在 screen 设备上使用,后面还有 and 字符 连接了一个宽度限制

我们就来谈谈Media Queries 的响应式设计

上面的示例 css 定义提到了 and (max-width:1024px)

这是什么意思呢? 当屏幕宽度小于 1024px 时, blackground 类的样式发生变化,背景色变成 #fff ;

是不是很神奇,没错 media 可以可以确定当前媒体环境的变化情况,根据你的媒体 宽度来动态加载不同的样式,达到响应式布局.

那么问题来了,如果根据不同的媒体 或者 媒体的不同分比率(水平宽度) 能不能加载不同的css 文件呢?

当然可以

我们可以这样引用 css 文件

<link rel="stylesheet" type="text/css" href="main.css" media="screen and (min-width:800px)" />

上面的定义告诉我们,当媒体是 电脑,笔记本,移动设备屏幕时,并且水平宽度大于 800px 就加载使用 main.css 样式文件

另外 media 属性还支持其他关键词 ,比如 not ,only

not: 表示当前媒体排除指定的设备 @media not print

上面定义的样式排除打印机

only: 用来指定特定的设备 @media only screen

上面定义告诉我们这个样式 只支持 台式机,笔记本,移动设备屏幕