随着3G的普及,越来越多的人使用手机上网。


移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?

bg2012050101

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

让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout),自适应网页设计便是适应今后移动互联网网页设计师所要考虑到的因素。

bg2012050107

 

 "自适应网页设计"的概念2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web Design)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。

看看这个范例,里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素,则6张图片并排在一行。

bg2012050103

 

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

bg2012050104

 

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

bg2012050105

 

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

bg2012050106

 

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

联系我们

SimpleHost, 中国代理 Inc.

中国广东省佛山市南海区,

桂城东二中心村 宏基506

400电话: 4006072580

JoomShaper

网页标签:网站寄存 网存 网上商店 网页寄存 电邮寄存 网页寄存 服务伺服器 寄存 网上寄存 寄存服务 网页寄存公司 网上购物 网站域名 注册域名

申请网域名称 网址 买域名 申请域名 网域 申请国际域名 网域注册 域名管理

官方微信:simplehost 官方微博:@simplehost 官方QQ 图库 维基 商城 688建站 自动提货 竞价域名 建站主题 微信网站 一键建站 分销联盟 微博 备案 推广 工具

粤ICP备14079089号-1

扫一扫,关注我们

simplehost、简单云、简单主机微信

稳定网站-简单云稳定技术