项目需求: 一套代码同时适配PC及移动端
方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换
坑: 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端,无法同时适配PC及移动端,感觉PC端还是使用固定像素px来布局好一点
设计稿尺寸1920*1080
为了设备不同分辨率的屏幕,可选择将设计稿宽度设置为1440
采用固定尺寸,固定字体,伸缩布局
如果是官网类的网站,采用固定宽度(如最大宽度1200)居中显示,管理类系统可采用可伸缩布局,菜单、导航固定,表格、内容等伸缩展示
设计稿尺寸750*2000
移动端使用rem布局,将CSS Rem为75
设置后可直接复制css代码
可配合amfe-flexible适配不同尺寸的移动端设备
//安装 npm i -S amfe-flexible //main.js引入 import 'amfe-flexible'