如何快速开发一个响应式移动端页面

适用领域

  • 1、非工程化项目(不需要webpack之类的打包)
  • 2、html+css页面数少的项目(例如:app下载页面、抽奖活动页面)
  • 3、其实pc端页面也适用的,但用的少(例如:大屏数据可视化页面)

方法

主要是用淘宝的flexible.js配合蓝湖的原型设计图,达到快速开发的目的。

flexible可以根据不同的页面width给网页中html跟节点设置不同的font-size,配合rem可实现响应式页面。

flexible默认是750px的设计页面,基准值是7.5rem。这个基准值很关键,设计稿所有css换算,都和这个基准值有关。

页面动态font-size值=设计稿宽度/基准值rem宽度

蓝湖可查看元素标注,自动生成CSS、iOS和Android代码。可以通过设置蓝湖的cssRem,自动转换所有元素的rem值,开发中很方便。

例如:设计稿宽度是375px的,页面动态font-size的值=375/7.5=50。如下设置,点击确定就行。

以上设置后,点击蓝湖中设计稿的元素,可以查看相关css代码,直接复制就可以使用。开发少量页面时,真的好快、好方便!

Demo

做了个小demo,是根据375px的设计稿实现的,效果如下

查看代码