彻底弄明白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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 HTML / CSS
html5本地存储_动力节点Java学院整理
Jul 12 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
canvas粒子动画背景的实现示例
Sep 03 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
Jan 30 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 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文本操作类
2006/11/25 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
Python中的super用法详解
2015/05/28 Python
Python如何实现守护进程的方法示例
2017/02/08 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
解决Python3中的中文字符编码的问题
2018/07/18 Python
浅谈flask源码之请求过程
2018/07/26 Python
python实现图片压缩代码实例
2019/08/12 Python
python框架flask表单实现详解
2019/11/04 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
2013英文求职信模板范文
2013/11/15 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
陕西导游词
2015/02/04 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python