彻底弄明白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的@media来编写响应式的页面
Nov 01 HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
CSS3使用transition属性实现过渡效果
Apr 18 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 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
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
$.each与$().each的区别示例介绍
2014/03/20 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
2016/09/21 Javascript
Angular.Js的自动化测试详解
2016/12/09 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python中按值来获取指定的键
2019/03/04 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
影视制作岗位职责
2013/12/04 职场文书
诚信考试承诺书
2014/03/27 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
科技活动周标语
2014/10/08 职场文书
公司辞职信模板
2015/05/13 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers