文档章节

CSS3 Media Queries 实现响应式设计

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

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

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

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

山哥
2012/02/28
0
0
响应式网页设计与应用

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

沉淀岁月
2013/09/13
414
2
响应式 Web 设计技巧

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

凡尘里的一根葱
2015/11/24
129
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash各类扩展详解

Bash各类扩展详解 Bash中主要包括大括号扩展、波浪号扩展、变量扩展、子命令扩展、文件名扩展和算数扩展。这些扩展组合在一起为Bash带来了极大的易用性。掌握这些扩展的用法和功能,能够为B...

小陶小陶
今天
1
0
EventBus原理深度解析

一、问题描述 在工作中,经常会遇见使用异步的方式来发送事件,或者触发另外一个动作:经常用到的框架是MQ(分布式方式通知)。如果是同一个jvm里面通知的话,就可以使用EventBus。由于Event...

yangjianzhou
今天
5
0
OpenCV图像处理实例:libuv+cvui显示摄像头视频

#include <iostream>#include <opencv2/opencv.hpp>#define CVUI_IMPLEMENTATION#include <cvui.h>extern "C"{#include <uv.h>}using namespace std;#define WINDOW_NAM......

IOTService
今天
3
0
openJDK之JDK9的String

1.openJDK8的String 先来看下openJDK8的String的底层,如下图1.1所示: 图1.1 底层上使用的是char[],即char数组 每个char占16个bit,Character.SIZE的值是16。 2.openJDK9中的String 图2.1...

克虏伯
今天
3
0
UEFI 模式下如何安装 Ubuntu 16.04

作者:知乎用户 链接:https://www.zhihu.com/question/52092661/answer/259583475 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 针对UEFI模式下安装U...

寻知者
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部