文档章节

CSS3 Media Queries 实现响应式设计

BearCatYN
 BearCatYN
发布于 2014/06/10 10:35
字数 948
阅读 85
收藏 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.5K
5
CSS3 响应式布局 Media Queries 媒体查询学习

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

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

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

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

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

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

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

沉淀岁月
2013/09/13
454
2

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud Feign 异常处理

问题 最近在项目开发中,使用 Feign 调用服务,当触发熔断机制时,遇到了以下问题: 异常信息形如:TestService#addRecord(ParamVO) failed and no fallback available.; 获取不到服务提供方...

xiaomin0322
20分钟前
1
0
解决OSX使用oh-my-zsh后.bash_profile自定义失效

场景描述 为了使OSX自带的终端在使用上更加顺手,便安装了oh-my-zsh插件, 但发现之前在.bash_profile自定义的一些内容都失效了。 问题分析 oh-my-zsh有自己的配置文件,覆盖了.bash_profile...

SuShine
23分钟前
0
0
java中线程读取配置文件properties

配置文件在很多方面可以用到,比如数据库连接,数据库工厂方法的调用,只要在配置文件中修改即可,不用修改程序,使用起来还是很方便的。 现在演示一下通过线程读取配置文件进行反射的一种方...

寒风中的独狼
25分钟前
2
0
面向接口编程详解-Java篇

  相信看到这篇文字的人已经不需要了解什么是接口了,我就不再过多的做介绍了,直接步入正题,接口测试如何编写。那么在这一篇里,我们用一个例子,让各位对这个重要的编程思想有个直观的印...

浮躁的码农
26分钟前
2
0
NPM install -save 和 -save-dev 傻傻分不清

本文原文地址:https://www.limitcode.com/detail/59a15b1a69e95702e0780249.html 回顾 npm install 命令 最近在写Node程序的时候,突然对 npm install 的-save和-save-dev 这两个参数的使用...

翔飘飘
27分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部