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

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

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

PC端

设计稿尺寸1920*1080

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

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

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

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

移动端

设计稿尺寸750*2000

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

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

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

设置后可直接复制css代码

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

 //安装  npm i -S amfe-flexible  //main.js引入 import 'amfe-flexible'

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywjyg.html