如何使用藍湖設計稿同時適配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'