不轻易透露的超强技巧！详解iVX中怎样做设备自适应

"自适应网页设计"的概念

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）进入。

---

各种方法在各种自适应场景中的应用

1.使用行列组件的设备宽

测试案例下载地址：https://latest.ivx.cn/ih5/app/template/download?id=82

选中目标行或者列，在左边属性面板上点击设置环境宽，就会出现以上的五种宽度