彻底弄明白CSS3的Media Queries(跨平台设计)


Posted in HTML / CSS onJuly 27, 2010

移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有完美解决方案的问题,直到有了 CSS3。

CSS3 的 Media Queries

在 CSS2 时代,如果你曾经为你的网站设计过打印版 CSS,就会明白 CSS3 Media Queries 的作用,不过,CSS3 的 Media Queries 比 CSS2 的 Media Type 更实用,事实上,CSS2 的 Media Type 并不曾被多少设备所支持过。CSS3 的 Media Queries 可以帮你获取以下数据:

  • 浏览器窗口的宽和高
  • 设备的宽和高
  • 设备的手持方向,横向还是竖向
  • 分辨率

如果用户有一个支持 Media Queries 的设备,我们就可以为该设备编写专门的 CSS,让网站适应这个设备的小屏幕,英国的 Web 技术大会 dConstruct 便基于该技术推出他们的 2010 年大会网站,手机也可以轻松访问,以下是该网站的桌面版和手机版截图:

彻底弄明白CSS3的Media Queries(跨平台设计)

彻底弄明白CSS3的Media Queries(跨平台设计)

这个网站在不同尺寸的设备上按不同的布局显示,并且,手机版在 iPhone,Opera Mini, Android 等设备上有完全一致的表现。

使用 Media Queries 为手机创建单独的 CSS

我们举一个简单的两栏式结构的例子。

彻底弄明白CSS3的Media Queries(跨平台设计)

为了让这个布局更好地在手机上显示,我们为手机版设计一个一栏式布局,且缩小 header 部分的图片大小。

使用 Media Queries 最直接的方法是,在你的 CSS 代码中,加一段独立代码分支,如下:

@media only screen and (max-device-width: 480px) {

}
code hosted by snipt.net
@media only screen and (max-device-width: 480px) {

}
code hosted by snipt.net

 

@media only screen and (max-device-width: 480px) {

}

 

接着,在这个分支中,为小屏幕编写独立的 CSS 定义,这些定义可以覆盖桌面版 CSS 中的相应定义(只要将这段分支代码放在后面),以下针对小屏幕的 CSS 将布局变成一栏式,且使用了小尺寸的 Header 图片:

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}
code hosted by snipt.net
@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}
code hosted by snipt.net

 

@media only screen and (max-device-width: 480px) {
	div#wrapper {
		width: 400px;
	}

	div#header {
		background-image: url(media-queries-phone.jpg);
		height: 93px;
		position: relative;
	}

	div#header h1 {
		font-size: 140%;
	}

	#content {
		float: none;
		width: 100%;
	}

	#navigation {
		float:none;
		width: auto;
	}
}

 

最终,我们在小屏幕设备上得到了如下显示效果:

彻底弄明白CSS3的Media Queries(跨平台设计)

使用 Media Queries 链接单独的 CSS 文件

对于小型的改动,直接在 CSS 代码中插入移动设备代码分支是很方便的,但对于大型站点,可以使用 Media Queries 链接独立的式样表文件,以便在独立的式样表文件中完全自由地为小设备编写 CSS 代码,方法如下:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
code hosted by snipt.net
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />
code hosted by snipt.net
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

测试 Media Queries

要在不同设备上测试 Media Queries 并非易事,你要有各种设备,还要将代码上传到某个主机进行访问测试。这里有一个在线服务,ProtoFluid,该服务允许你提供你要测试的网站的 URL,或者你本机上的 URL,然后,模拟 iPhone 等移动设备显示你的设计,下图是上文中提到的 dConstruct 网站在 ProtoFluid 的 iPhone 模拟中显示的样子。你也可以填写你自己的窗口尺寸,来模拟特定的设备。

彻底弄明白CSS3的Media Queries(跨平台设计)

在 ProtoFluid 使用 Media Queries,你需要同时加上 max-width 和 max-device-width 属性,这意味着,Media Queires 不仅可以针对不同的移动设备,还可以针对桌面系统中某些人为的小窗口情形。

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}
code hosted by snipt.net
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}
code hosted by snipt.net
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {

}

使用上面的代码,在桌面浏览器上,当你改变窗口尺寸到达 480 像素的时候,就会看到布局的改变。需要注意的是,上面的 max-width 部分仅仅为了测试,如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变,可以去掉 max-width 部分,而只针对那些移动设备。

对现有网站的整改

上面的例子为了说明问题起见都很简单,现实中的站点不可能这样,下面的例子,作者将使用他自己的公司网站,说明如何使用 Media Queries 对现有网站进行移动化整改。

桌面布局

作者自己的网站是几年前设计的,那是还没有考虑 Media Queries 问题,这是一个三栏式布局。

彻底弄明白CSS3的Media Queries(跨平台设计)

增加新的式样表

为了适应移动设备,将使用 Media Queries 加载独立的式样表:

<link 
rel="stylesheet" 
type="text/css" 
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" 
/>
code hosted by snipt.net
<link 
rel="stylesheet" 
type="text/css" 
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" 
/>
code hosted by snipt.net
<link 
rel="stylesheet" 
type="text/css" 
media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" 
href="/assets/css/small-device.css" 
/>

作者的做法是,将他站点中原来的 CSS 文件另存为 small-device.css ,在这个基础上针对移动设备进行整改。

压缩 Header 部分

第一步是让 Logo 部分能在小屏幕上显示,因为这个 Logo 是基于背景图片的,因此很好办,同时,提供一个小尺寸的背景图,以便和 Logo 搭配。

body {
	background-image: url(/img/small-bg.png);
}

#wrapper {
	width: auto;
	margin: auto;
	text-align: left;
	background-image: url(/img/small-logo.png);
	background-position: left 5px;
	background-repeat: no-repeat;
	min-height: 400px;
}
code hosted by snipt.net
body {
	background-image: url(/img/small-bg.png);
}

#wrapper {
	width: auto;
	margin: auto;
	text-align: left;
	background-image: url(/img/small-logo.png);
	background-position: left 5px;
	background-repeat: no-repeat;
	min-height: 400px;
}
code hosted by snipt.net
body {
	background-image: url(/img/small-bg.png);
}

#wrapper {
	width: auto;
	margin: auto;
	text-align: left;
	background-image: url(/img/small-logo.png);
	background-position: left 5px;
	background-repeat: no-repeat;
	min-height: 400px;
}

单列式布局

下一步主要的工作是将多栏式布局换成单栏式,桌面版使用 Float 实现多栏布局,要改成单栏,只需将 float 设置为 float:none,并将 width 设置为 width:auto,这样,就实现了单列式布局。

.article #aside {
	float: none;
	width: auto;
}
code hosted by snipt.net
.article #aside {
	float: none;
	width: auto;
}
code hosted by snipt.net
.article #aside {
	float: none;
	width: auto;
}

再紧凑一些

然后,将margin 和 padding 进行调整,使之更紧凑一些:

彻底弄明白CSS3的Media Queries(跨平台设计)

在 iPhone 中测试

在 iPhone 中实际测试的时候,发现网站在单列式布局中仍然向外延伸了,从 Safari developer website 找到解决办法,在网站头,添加一个 meta tag,将网站的视窗宽度设置成何设备一致。

<meta name="viewport" content="width=device-width" />
code hosted by snipt.net
<meta name="viewport" content="width=device-width" />
code hosted by snipt.net
<meta name="viewport" content="width=device-width" />

彻底弄明白CSS3的Media Queries(跨平台设计)

HTML / CSS 相关文章推荐
CSS3中利用animation属性创建雪花飘落特效
May 14 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
Jul 20 #HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 #HTML / CSS
css3 border-image使用说明
Jun 23 #HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 #HTML / CSS
基于css3仿造window7的开始菜单
Jun 17 #HTML / CSS
css3.0新属性效果在ie下的解决方案
May 10 #HTML / CSS
CSS3 开发工具收集
Apr 17 #HTML / CSS
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
浅析php header 跳转
2013/06/17 PHP
php取整函数ceil,floo,round的用法及介绍
2013/08/31 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
Laravel 5.3 学习笔记之 配置
2016/08/28 PHP
jquery slibings选取同级其他元素的实现代码
2013/11/15 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
vue input实现点击按钮文字增删功能示例
2019/01/29 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
关于Python中异常(Exception)的汇总
2017/01/18 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Face++ API实现手势识别系统设计
2018/11/21 Python
Python对列表的操作知识点详解
2019/08/20 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
python全局变量引用与修改过程解析
2020/01/07 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
机械系毕业生求职信
2014/05/28 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书