• UID97
  • 登录2016-04-18
  • 粉丝12
  • 关注3
  • 发帖134
  • 主页
  • 金币1957枚
社区居民
忠实会员
原创写手
fsnews 发布于2015-10-21 00:10
3/2052

自适应响应式网页设计(Responsive Web Design)

楼层直达
随着3G的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

图片:001.jpg



手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。

于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?

图片:002.jpg



一、"自适应网页设计"的概念
2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

图片:003.jpg




如果屏幕宽度在600像素到1300像素之间,则6张图片分成两行。

图片:004.jpg




如果屏幕宽度在400像素到600像素之间,则导航栏移到网页头部。

图片:005.jpg




如果屏幕宽度在400像素以下,则6张图片分成三行。

图片:006.jpg




mediaqueri.es上面有更多这样的例子。这里还有一个测试小工具,可以在一张网页上,同时显示不同分辨率屏幕的测试效果,我推荐安装。

二、允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的?其实并不难。首先,在网页代码的头部,加入一行viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置,包括IE9。对于那些老式浏览器(主要是IE6、7、8),需要使用css3-mediaqueries.js
<!--[if lt IE 9]>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
 <![endif]-->

三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。
具体说,CSS代码不能指定像素宽度:
width:xxx px;

只能指定百分比宽度:
width: xx%;

或者
width:auto;

四、相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {
 font: normal 100% Helvetica, Arial, sans-serif;
 }
上面的代码指定,字体大小是页面默认大小的100%,即16像素。
h1 {
 font-size: 1.5em; 
 }
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small {
 font-size: 0.875em;
 }
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

五、流动布局(fluid grid)


"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main {
 float: right;
 width: 70%; 
 }
.leftBar {
 float: left;
 width: 25%;
 }
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。另外,绝对定位(position: absolute)的使用,也要非常小心。

六、选择加载CSS
"自适应网页设计"的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css"
 media="screen and (max-device-width: 400px)"
 href="tinyScreen.css" />
上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css"
 media="screen and (min-width: 400px) and (max-device-width: 600px)"
 href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。
除了用html标签加载CSS文件,还可以在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px);

七、CSS的@media规则



同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。
@media screen and (max-device-width: 400px) {
.column {
 float: none;
 width:auto;
 }
#sidebar {
 display:none;
 }
}
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

八、图片的自适应(fluid image)


除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。这只要一行CSS代码:
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效,所以可以写成:
img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:
img {  width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令
img { -ms-interpolation-mode: bicubic; }
或者,Ethan Marcotte的imgSizer.js
addLoadEvent(function() {
var imgs = document.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
不过,有条件的话,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。

0人打赏
  • UID1
  • 登录2016-01-24
  • 粉丝577
  • 关注562
  • 发帖64
  • 主页
  • 金币202058枚
原创写手
社区居民
admin 发布于2015-10-21 15:00
沙发F
  • UID15
  • 登录2016-08-05
  • 粉丝48
  • 关注40
  • 发帖447
  • 主页
  • 金币1838枚
社区居民
喜欢达人
原创写手
janking 发布于2015-10-21 15:49
板凳F
  • UID13161
  • 登录2016-11-17
  • 粉丝0
  • 关注3
  • 发帖2
  • 主页
  • 金币92枚
社区居民
1ny丶明 发布于2016-08-29 10:33
地板F
您需要登录后才可以回帖
发表回复
极贡献
技术问答
专题荟萃
程序人生
视觉设计
Android开发
iOS开发
编程语言
前端开发
后端开发
服务器架构
软件测试
运维方案
创业路上



最热文章墙

  • 60124/343   【精品推荐】200多种Android动画效果的强悍框架,太全了,不看这个,再有动画的问题,不理你了^@^

  • 33298/188   情人节福利,程序员表白的正确姿势:改几行代码就变成自己的表白了

  • 31893/141   省时省力的Android组件群来了,非常棒的原型参考

  • 29036/226   【精品推荐】Android版产品级的音乐播放器源码,功能太强大了,最好的产品原型有木有?

  • 26218/2   超全!整理常用的iOS第三方资源

  • 25788/0   Python爬虫:常用浏览器的useragent

  • 24733/70   原创表白APP,以程序员的姿势备战新年后的7夕,持续完善中!

  • 22954/138   2016抢红包软件及源码

  • 19964/29   麻省理工的一帮疯子,真的实现了随意操控万物!(绝对黑科技)

  • 19806/25   Android工程师面试题大全

  • 19230/27   2016程序员跳槽全攻略

  • 19014/9   GitHub上排名前50的iOS项目:总有一款你用得着

  • 18522/20   码魂:程序员的牛B漫画

  • 16872/3   吐槽那些程序员的搞笑牛逼注释

  • 16851/149   Android版类似UC浏览器:非常赞,产品级的源码

  • 15704/1   iOS 动画总结

  • 15298/10   2016年最全的Android面试考题+答案 精编版

  • 15254/41   一个绚丽的loading动效分析与实现!

  • 14818/73   【持续更新中】Android福利贴(二):资料源码大放送

  • 14762/83   Android小而全的博客源码:非常适合全面掌握开发技巧

  • 14663/10   女程序员的梦,众网友的神回复

  • 14542/44   惊艳的App引导页:背景图片切换加各个页面动画效果

  • 14468/11   年会上现场review代码是怎么样的体验!

  • 14205/23   个人收集的Android 各类功能源代码

  • 14109/5   新一代Android渠道打包工具:1000个渠道包只需要5秒

  • 13288/19   珍藏多年的素材,灵感搜寻网站

  • 13236/53   基于瀑布流的美女图片浏览App,有注释的源代码

  • 12906/17   用JavaScript 来开发iOS和Android 原生应用:React Native开源框架中文版来啦

  • 12777/15   基于Android支付宝支付设计和开发方案

  • 12754/74   仿京东商城客户端Android最新版,不错的原型和学习资料

  • 12513/20   Android福利第三波【Android电子书】

  • 12333/17   什么是真正的黑客:收获12200+Stars,人气远超微软开源VS

  • 12170/18   65条最常用正则表达式,你要的都在这里了

  • 12168/94   Android带弹幕的视频播放器源码,来自大名鼎鼎的Bilibili弹幕网站

  • 12045/70   【精品推荐】类似360安全卫士安Android源码:非常赞的产品原型

  • 11744/7   用程序员的姿势抢过年的火车票

  • 11682/7   一张图搞定iOS学习路线,非常全面

  • 11645/0   iOS中文版资源库,非常全

  • 11631/11   有木有这样一张酷图帮你集齐所有git命令超实用

  • 11158/10   成为Java顶尖程序员 ,看这11本书就够了

  • 10903/18   一张图搞定Android学习路线,非常全面

  • 10835/10   微信支付终于成功了(安卓,iOS),在此分享

  • 10485/44   在线音乐播放器完整版(商用级的源码):非常赞,可听免费高品质专辑

  • 10456/3   基于Node.js的强大爬虫,能直接发布抓取的文章哦

  • 10372/29   【持续更新中】Android福利贴(一):资料源码

  • 10348/0   GitHub iOS 库和框架Top100 

  • 9926/4   46 个非常有用的 PHP 代码片段

  • 9703/3   即时通信第三方库

  • 9606/61   【技巧一】搭配Android Studio,如何实现App远程真机debug?

  • 9507/9   烧了5亿美金,这家神秘的公司即将颠覆人类未来!

  • 9464/8   流媒体视频直播方案

  • 9315/9   B站建开源工作组:APP想支持炫酷弹幕的看过来

  • 9210/18   八个最优秀的Android Studio插件

  • 9162/2   【精品推荐】高质量PHP代码的50个实用技巧:非常值得收藏

  • 9070/9   中国黑客的隐秘江湖:攻守对立,顶尖高手月入千万美元

  • 8636/6   开箱即用!Android四款系统架构工具

  • 8527/3   一张图看清Linux 内核运行原理

  • 8421/10   十大技巧快速提升Android应用开发性能

  • 8399/3   10款GitHub上最火爆的国产开源项目——可以媲美西半球

  • 8090/1   Android性能优化视频,文档以及工具

  • 返回顶部