Document

### 方案一：rem+flexible #### postcss配置 ``` "postcss": { "plugins": { // 将css文件中的px转换成rem,autoprefixer是加上各种浏览器前缀 "postcss-px2rem": { // UI图片的基准值 750px就是75,640px就是64,默认为75 "remUnit": 37.5, "remPrecision": 6, //准换成rem后的小数点精确数位默认为6 "baseDpr": 2, //基准device pixel ratio值默认为2 }, "autoprefixer": { "overrideBrowserslist": [ "Android 4.1", "iOS 7.1", "Chrome > 31", "ff > 31", "ie >= 8" ] } } }, "postcss-pxtorem": { "rootValue": 50, // 根元素字体大小 "propList": [ "*" ] }, ``` #### 适配代码 ``` import 'amfe-flexible/index.js' const baseSize = 100 // 这个是设计稿中1rem的大小。 function setRem () { // 实际设备页面宽度和设计稿的比值 const scale = (document.documentElement.clientWidth || document.body.clientWidth) / 750 // 计算实际的rem值并赋予给html的font-size document.documentElement.style.fontSize = (baseSize * scale) + 'px' } setRem() window.addEventListener('resize', () => { setRem() }) ``` 提示 : 当脱离掉node_modules重新npm install项目依赖时还是需要重新修改一遍的，谨记！ ``` // rem适配 // rem适配原理，改变了一个元素在不同设备上占据的css像素的个数 // 优点：没有破坏完美视口 // 缺点：px值到rem值到转换太复杂 (function(){ var styleNode = document.createElement("style"); var w = document.documentElement.clientWidth / 16; styleNode.innerHTML = "html{font-size:" + w + "px!important}"; document.head.appendChild(styleNode) })() ``` ### 方案二：viewport 适配 ``` /* viewport 适配的原理，viewport适配方案中，每一个元素在不同设备上占据的css像素的个数是一样的，但是css像素和物理像素的比例是不一样的，等比的。优点：所量即所得缺点：没有使用完美视口*/ Document ``` **感谢阅览，以上是我常用的适配方案，各位掘友们如果有更好的适配方案，欢迎分享奥~~**