响应式网页设计学习笔记

66 篇文章 1 订阅
59 篇文章 0 订阅

一、why

随着移动技术的迅速普及,越来越多的人通过不同设备来浏览网页,为了便于不同设备的用户访问,网页经常需要针对不同设备进行不同的设计,不但费时费力,而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。


图1.当前流行的网页浏览设备


图2.网页运行于不同的操作系统


图3.当前主流的屏幕尺寸对比


图4.当前主流浏览器市场占有量对比

二、what

what is Responsive Web Design?啥是响应式网页设计(又译为自适应网页设计),指的是可以自动识别屏幕宽度、并做出相应调整的网页设计,简单来说就是同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout) 。


图5.响应式网页设计效果图

可以看看35 Free and Responsive Website Templates,体会体会响应式网页设计的内涵和特征。

1.优点

视觉体验统一,见图6.

兼容不同设备,见图7.

节约成本,见图8.

图6.不同设备相同的视觉体验


图7.兼容当前及未来新设备


图8.节约成本

2.缺点

缺点主要有难以兼容低版本浏览器,移动宽带流量。

3.图解Responsive web design


三、how

1.一切弹性化

我们通过响应式的设计和开发思路让页面更加"弹性"了。图片的尺寸可以被自动调整,页面液态图片技术  液态图片技术布局再不会被破坏。虽然永远没有最完美的解决方案,但它给了我们更多选择。无论用户切换设备的屏幕定向方式,还是从台式机屏幕转到iPad上浏览,页面都会真正的富有弹性。通过液态网格和液态图片技术,并且在正确的地方使用了正确的HTML标记。

2.响应式图片

响应式图片技术思想:不仅要同比的缩放图片,还要在小设备上降低图片自身的分辨率。

看看用3个步骤实现响应式Web设计

参考文献

1.响应式web设计浅析,收集自网络。

2.响应式网页设计,百度文库

3.响应式web设计专题,51CTO

4.Handling Responsive Designing Strategically

5.guidelines for responsive web design

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值