> 针对基于设计稿1920*1080的大屏项目做适配，可采用纯`rem`或者`rem + transform scale` 两种适配方式 # 1. 纯rem适配 ## npm包： 1. postcss-pxtorem 2. amfe-flexible ## px转rem ```js // postcss.config.js module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "last 10 versions" ], grid: true }, 'postcss-pxtorem': { rootValue: 192, unitPrecision: 5, propList: ['*'], selectorBlackList: ['.px'], } } } ``` ## main.js 引入 amfe-flexible ```javascript // main.js import 'amfe-flexible' ``` # 2. rem + transform scale ## npm包： 1. postcss-pxtorem ## px转rem ```javascript // postcss.config.js module.exports = { plugins: { autoprefixer: { overrideBrowserslist: [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8", "last 10 versions" ], grid: true }, 'postcss-pxtorem': { rootValue: 192, unitPrecision: 5, propList: ['*'], selectorBlackList: ['.px'], } } } ``` ## 1080px高度自适应方法 ```javascript // utils/rem.js /* eslint-disable */ // 基准大小 const baseSize = 192 // 设置 rem 函数 function setRem() { // 当前页面高度相对于 1080 高的缩放比例，可根据自己需要修改。 const clientHeight = document.documentElement.clientHeight; const clientWdith = document.documentElement.clientWidth; if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) { document.addEventListener('DOMContentLoaded', function () { document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + 'px' }) window.addEventListener('resize', function () { document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 375) + 'px' }) } else { const scale = clientHeight / 1080 window.currentScale = scale; if (scale <= 1) { document.documentElement.style = `font-size: ${baseSize * Math.max(scale, 1)}px`; document.body.style = `width: ${(clientWdith / scale)}px;transform: scale(${scale});height: ${(clientHeight / scale)}px;transform-origin: left top;`; } else { document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'; document.body.style = '' } } } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() } ``` ## main.js 引入 amfe-flexible ```javascript // main.js import './utils/rem.js' ```