文档章节

CSS3 Media Queries 实现响应式设计

BearCatYN
 BearCatYN
发布于 2014/06/10 10:35
字数 948
阅读 93
收藏 8

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并采用不同的样式表。

  例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观。阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀网站案例。

CSS3 Media Queries

看下这个 在线演示,调整你的浏览器窗口尺寸,看看它的变化。

Max Width

下面的样式会在可视区域的宽度小于 600px 的时候被应用。

1
2
3
4
5
@media       screen           and (     max-width     :     600px     ) {
       .class {
         background     :     #ccc     ;
       }
}

如果你想链接到一个单独的样式表,把下面的代码放在<head>标签里。

1
<link rel=     "stylesheet"           media=     "screen and (max-width: 600px)"           href=     "small.css"           />

Min Width

下面的样式会在可视区域的宽度大于 900px 的时候被应用。

1
2
3
4
5
@media       screen           and (     min-width     :     900px     ) {
       .class {
         background     :     #666     ;
       }
}

Multiple Media Queries

你还可以使用过个匹配条件,下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。

1
2
3
4
5
@media       screen           and (     min-width     :     600px     ) and (     max-width     :     900px     ) {
       .class {
         background     :     #333     ;
       }
}

Device Width

下面的样式会在 max-device-width 是 480px 的设备上触发。(提示:max-device-width 是设备的实际分辨率,而 max-width 指的是可视区域分辨率。)

1
2
3
4
5
@media       screen           and (max-device-     width     :     480px     ) {
       .class {
         background     :     #000     ;
       }
} 

For iPhone 4

下面的样式是为 iPhone 4 专门写的 (作者: Thomas Maier)。

1
<link rel=     "stylesheet"           media=     "only screen and (-webkit-min-device-pixel-ratio: 2)"           type=     "text/css"           href=     "iphone4.css"           /> 

For iPad

你还可以使用 media query 在 iPad 上检测方向(portrait or landscapse) (作者: Cloud Four)。

1
2
<link rel=     "stylesheet"           media=     "all and (orientation:portrait)"           href=     "portrait.css"     >
<link rel=     "stylesheet"           media=     "all and (orientation:landscape)"           href=     "landscape.css"     > 

Media Queries for IE

遗憾是的,IE8 及更老版本的浏览器不支持 CSS3 Media Queries,不过可以使用 Javascript  弥补,下面是一些解决方案:

附:CSS3 Media Queries 浏览器兼容性表

 

CSS3 Media Queries 应用案例

需要在下面这些支持 Media Queries 特性的浏览器中浏览:IE9+, Firefox, Chrome 和 Safari。浏览每个站点,看页面布局是如何响应浏览器窗口变化的。

Hicksdesign

  • 大尺寸: 3 列侧栏

  • 较小尺寸: 2 列表侧栏 (中间一列下降到左边的列)

  • 更小尺寸: 1 列侧栏 (右列上移到标志下方)

  • 最小尺寸: 没有侧栏 (LOGO及右列上移,其他侧边栏列移到底部)

screen capture

Colly

页面的布局会根据浏览器的尺寸在1列,2列和4列之间切换。

screen capture

A List Apart

  • 大尺寸: 导航在顶部,图片只有一行。

  • 中等尺寸: 导航在左边,图片变成3列。

  • 小尺寸: 导航在顶部,LOGO没有了背景图片,图片变成3列。

screen capture

Tee Gallery

这个和前面的 Colly 很像,不过这个案例中的图片也会随着布局的变化而变化。技巧是使用百分比设置元素的宽度。

screen capture

总结

  请记住:为移动设备优化了样式表并不意味着你的网站就适合在移动设备显示了。要做到真正的移动设备优化,要削减图像大小、标签数量和加载的资源尺寸等等。CSS3 Media Queries 是用于设计的呈现,而不是优化。


本文转载自:http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html

BearCatYN
粉丝 26
博文 158
码字总数 11947
作品 0
朝阳
程序员
私信 提问
18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑
2013/06/18
10.6K
5
CSS3 响应式布局 Media Queries 媒体查询学习

css3 响应式布局学习 响应式:就是根据不同设备,或者设备不同分辨率,动态给出对应的样式变化 响应不同的设备 涉及到 css 中的 Media Queries ,这个词组被译为 “媒体查询” Media Queries 用法...

一介布衣
2015/09/23
0
0
什么是响应式Web设计?怎样进行?

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!),...

山哥
2012/02/28
140
0
响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱
2015/11/24
159
0
响应式网页设计与应用

响应式Web设计(Responsive Web design),理念是设计和开发应根据屏幕的大小、平台的用户的行为和环境基础上自动调整;他应该有一个灵活的网格和布局,图像和CSS能够智能的组合 使用。比如说用...

沉淀岁月
2013/09/13
477
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring Security 实战干货:实现自定义退出登录

1. 前言 上一篇对 Spring Security 所有内置的 Filter 进行了介绍。今天我们来实战如何安全退出应用程序。 2. 我们使用 Spring Security 登录后都做了什么 这个问题我们必须搞清楚!一般登录...

码农小胖哥
13分钟前
5
0
JVM核心知识-类加载机制

JVM中类的生命周期包括7个阶段,加载、准备、验证、解析、初始化、使用、卸载。其中准备、验证、解析被归为连接阶段。 加载 jvm在这个阶段完成的工作 通过类名获取类的二进制字节流 将这个字...

moon888
13分钟前
5
0
.net工作流引擎ccflow流程结束相关功能的介绍

关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明 工作流设计 工作流快速开发平台 业务流程管理 bpm工作流系统 java工作流主流框架 自定义...

孟娟
27分钟前
3
0
APP 值入轻量级钱包以太坊网络钱包

APP 值入轻量级钱包以太坊网络钱包

xiaodong16
31分钟前
3
0
云原生下数据治理的微服务架构

摘要: 现代软件发展历程中,微服务概念早在2014年由两位美国学者提出,2015年云原生也在linux基金会的推动下茁壮成长。短短几年,越来越多的公司投入研究,越来越多的技术框架孕育而生。本文...

恒宝乐园
39分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部