js页面自适应屏幕大小-自适应网页设计.docxVIP

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