文档章节

CSS3 Media Queries 实现响应式设计

BearCatYN
 BearCatYN
发布于 2014/06/10 10:35
字数 948
阅读 80
收藏 8
点赞 0
评论 0

在 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 是用于设计的呈现,而不是优化。


© 著作权归作者所有

共有 人打赏支持
BearCatYN
粉丝 27
博文 157
码字总数 11947
作品 0
朝阳
程序员
18 个详细的响应式 Web 设计教程

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

小编辑 ⋅ 2013/06/18 ⋅ 5

用3个步骤实现响应式网页设计

写在前面的话:随着移动设备的逐渐普及和Web技术的发展,跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢?我们可以利用CSS3的Media Query来实现。本文主要介绍了移动...

阿丢丢 ⋅ 2014/01/15 ⋅ 0

CSS3 响应式布局 Media Queries 媒体查询学习

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

一介布衣 ⋅ 2015/09/23 ⋅ 0

什么是响应式Web设计?怎样进行?

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

山哥 ⋅ 2012/02/28 ⋅ 0

响应式网页设计与应用

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

沉淀岁月 ⋅ 2013/09/13 ⋅ 2

响应式 Web 设计技巧

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

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

第一个html5+响应式页面

闲来无聊研究研究响应式,对html5、响应式一知半解的。 废话少说,直接上代码 1、添加meta标识:大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。禁止缩放,使用设备...

TA叫我小明 ⋅ 2014/01/18 ⋅ 0

响应式设计的现状与趋势

响应式设计的现状与趋势 从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计;2015年网页设计趋势预测中,响应式仍在继续。这个经历了几年依然大热的响应式,在过去的几年...

开元中国2015 ⋅ 2015/07/24 ⋅ 1

响应式布局这件小事

讲到响应式布局,相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式...

山哥 ⋅ 2013/04/23 ⋅ 0

响应式Web设计(三):响应式Web设计的方法

  介绍完响应式Web的背景和概念之后,是时候该介绍具体的实现方法了,其实响应式Web设计的方法很简单,就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。   首先我们一起来看...

幸福2胖纸 ⋅ 2013/05/06 ⋅ 2

没有更多内容

加载失败,请刷新页面

加载更多

下一页

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 7

mysql in action / alter table

change character set ALTER SCHEMA `employees` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_general_ci ;ALTER TABLE `employees`.`t2` CHARACTER SET = utf8mb4 , COLLAT......

qwfys ⋅ 今天 ⋅ 0

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

MySQL

查看表相关命令 - 查看表结构    desc 表名- 查看生成表的SQL    show create table 表名- 查看索引    show index from  表名 使用索引和不使用索引 由于索引是专门用于加...

stars永恒 ⋅ 昨天 ⋅ 0

easyui学习笔记

EasyUI常用控件禁用方法 combobox $("#id").combobox({ disabled: true }); ----- $("#id").combobox({ disabled: false}); validatebox $("#id").attr("readonly", true); ----- $("#id").r......

miaojiangmin ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部