移动版/桌面版设计模式

平台可以让移动端和桌面端展示完全不同的页面设计和数据内容。

单独设计

平台默认为一个页面生成两种设计,从移动端和桌面端访问得到完全不同的页面,互不影响。
单独为宽屏或窄屏设计可以最大程度地提升用户体验。设计移动端时不用再顾及会如何影响桌面端,反之亦然。可以降低设计的复杂度,也可以避免多余的组件和臃肿的样式。

统一设计

平台只会为一个页面生成一种设计,不论什么设备访问都得到相同的页面。好处是只需要做一个页面设计就可以了。
如果用户只会在移动端或桌面端访问应用,应该选择此项,比如微信公众号页面,终端用户只会从微信访问,只需要设计好移动端即可,同时各种后台管理工作也可以在桌面端的不同的页面进行,互不冲突。为了让窄屏页面在宽屏里显示更友好可以在根节点加上zmscreen类名。
另一种场景是虽然两端都有用户,但页面设计区别不大,想通过CSS自适应来设计页面时也选此项。

更改设计

默认单独设计默认统一设计可在创建页面时再次确认本页的设计模式。
在应用中心的基本信息栏可以更改全局设计模式,从其他模式更改到一直统一设计需要删除移动端或桌面端已经设计好的页面,所以会警示并让选择是要淘汰哪种页面。

共用CSS,移动端CSS,桌面端CSS

加载应用时会加载全局的共用CSS和对应端的CSS。我们可以利用这个特性更好地设计出不同屏幕的体验。

类名zmobile,zdesktop

移动端访问时平台会在body上加zmobile类名,桌面端则是zdesktop。我们也可以利用这个特性写CSS时用这个类名修饰选择器使之有不同的表现。

Make in ZC APP Platform