如何使用蓝湖设计稿同时适配PC及移动端

如何使用蓝湖设计稿同时适配PC及移动端

项目需求： 一套代码同时适配PC及移动端
方案: pc端采用px布局，移动端采用rem布局，通过媒体查询（media query）切换
坑： 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端，无法同时适配PC及移动端，感觉PC端还是使用固定像素px来布局好一点

PC端

设计稿尺寸1920*1080

为了设备不同分辨率的屏幕，可选择将设计稿宽度设置为1440

采用固定尺寸，固定字体，伸缩布局
如果是官网类的网站，采用固定宽度（如最大宽度1200）居中显示，管理类系统可采用可伸缩布局，菜单、导航固定，表格、内容等伸缩展示

移动端

设计稿尺寸750*2000

移动端使用rem布局,将CSS Rem为75

设置后可直接复制css代码

可配合amfe-flexible适配不同尺寸的移动端设备

　//安装

　npm i -S amfe-flexible

　//main.js引入

  import 'amfe-flexible'