js移动端布局适配方案全方位解析

移动端布局

• 设备像素比 这里只做简单说明具体概念可自行百度

物理像素（显示屏所展现的像素）
逻辑像素（css中设置的像素）
dpr=物理像素/逻辑像素

布局方式

• vw+rem

    1vw=视口宽度1%

   	100vw=视口宽度100%

   	例子：设计图是640px，则视口宽度是320px；

   	100vw=320px

   	1vw=3.2px

   	100px/3.2=31.25

   	100px=31.25vw
   	根元素的大小设置31.25vw
   	除以2再除以100 单位rem

• calc函数

	 html{
            font-size: calc(100vw / 7.5)
        }
        *{
            margin: 0;
            padding: 0
        }
        /* 测试 设计稿750px dpr2 7.5rem=375px=100vw 1rem=50px 实际测量除以100 */
        ul{
            width: 7.5rem;
            height: 3.75rem;
            font-size: 0.4rem;
            background-color: pink
        }

• flexible.js

链接地址 flexible.js

代码分析和及如何方便快捷使用

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 24
    //这里可以根据自己的设计图来平分等份  手机设计稿一般为640px或者750px  640px的可以划分为10等份这样1rem=64px了  750px可以划分为7.5份 则1rem=100px 
	//大屏适配1920*1080 1920px  1920/24 = 80px 也就是1rem = 80px  hbuilder编辑器默认1rem=16px 可以到工具--设置--编辑设置里修改为80 这样就可以自动转换了啦。。
	// vscode 可以下载个cssrem插件 然后找到该插件设置下就可以实现自动转换了
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

---

vue项目实战之postcss-pxtorem

postcss-pxtorem文档传送门结合flexible.js实现px自动转换rem

• 第一步，安装相关插件
  npm i -S amfe-flexible
npm install postcss-pxtorem --save-dev
• 第二步，在main.js入口文件引入flexible.js
  import 'flexible.js ' 这里要根据自己的文件路劲进行导入
• 第三步，新建 postcss.config.js 文件 （与package.json文件同级）配置一下代码

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 75,//flexible.js 默认是 可视区的宽度/10 这里是设计稿750px 1rem = 75px
      propList: ['*'],//任何属性的值都会转换
      minPixelValue: 2,//忽略1px  如 1px solid gray 还是1px 
    }
  }
} 

vue项目实战之postcss-px-to-viewport

postcss-px-to-viewport文档传送门

• 第一步，安装
  npm install postcss-px-to-viewport --save-dev
• 第二步，新建 postcss.config.js 文件 （与package.json文件同级）配置一下代码

 module.exports = {
    plugins: {
       autoprefixer: {},
       'postcss-px-to-viewport': {
         viewportWidth: 750,   
         unitPrecision: 3,     
         viewportUnit: "vw",  
         selectorBlackList: [],
         minPixelValue: 1,  
         mediaQuery: false 
       }
     }
 }  

另一种方式 postcss-px-to-viewport 在vue.config.js文件中配置

module.exports = {
 css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("postcss-px-to-viewport")({
            unitToConvert: "px",
            //设计图的宽度
            viewportWidth: 375,
            //精度
            unitPrecision: 3,
            propList: ["*"],
            viewportUnit: "vw",
            fontViewportUnit: "vw",
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: /(\/|\\)(node_modules)(\/|\\)/,
          }),
        ],
      },
    },
  },

}

其他的属性可以查看相关文档配置