本文介绍了自适应网页设计的概念，源自Ethan Marcotte在2010年的提出。文章详细讲解了各种自适应场景，包括手机、iPad和PC屏幕的宽度差异，并通过案例展示了在iVX编辑器中如何运用行列组件的设备宽、撑开属性、横幅整体布局和if容器来实现设备自适应。提供了多个测试案例链接以供实践。
"自适应网页设计"的概念
2010年，EthanMarcotte提出了"自适应网页设计"（ResponsiveWebDesign）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计，自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone/iPad版本，这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
各种自适应场景简介
手机的屏幕比较小，宽度通常在600像素以下；iPad的屏幕宽度比手机大，通常在768到1024像素间；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。
上图是一套自适应UI范例，是设计师Mounse放在mediaqueri里设计的一套自适应的UI的作品。
- 如果屏幕宽度大于1300像素，则表现为上图，这通常被用在适配pc端的web页面。
- 如果屏幕宽度在600像素到1300像素之间，则表现为上图，这通常被用在适配pad和pc小屏幕。
- 如果屏幕宽度在400像素到600像素之间，则表现为上图。
- 如果屏幕宽度在400像素以下，则表现为上图,这通常用在我们的移动端（mobile版），自适应就是把上面的设计图做到一个web页面内而非多入口（portal）进入。
各种方法在各种自适应场景中的应用
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
