作者 varcyan 龙遨星海
varcyan,前端攻城炮炮兵,大学接触前端至今一直从事于前端开发的工作,前端对于我来说既是工作也是兴趣所在。
龙遨星海,80后程序员,热爱编程,喜欢解决技术问题,体验成功的喜悦。
摘要 如何在不同大小的设备上呈现同样的显示效果,实现在不同屏幕下自适应设计方案,达到统一PC端和移动端的页面目标。本篇文章简要介绍一种实现方案。
![35ed20b9e1ba517aea51c5015f742c1f.png](https://i-blog.csdnimg.cn/blog_migrate/de2ef5c6ad9678b2112ea293c35cf2ca.png)
一、背景描述
随着网络的普及,越来越多的人使用手机上网。移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师和开发者不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页?
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?![2eda56e8e62222f3486b3d2b9e5b6edf.png](https://i-blog.csdnimg.cn/blog_migrate/8f3146ab10d549545dd9faaaf4b53e91.png)
二、什么是自适应网页设计
自适应网页设计(英语:Responsive web design,通常缩写为RWD)别名(响应式web设计)。
2010年,Ethan Marcotte提出了"自适应网页设计"这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。