vue项目将px转化为rem (解决移动端的适配问题)

1、使用 px2rem-loader （vue3.0以下脚手架构建的项目）

（1）安装 lib-flexible 和 px2rem-loader

npm i  lib-flexible  --s

npm i px2rem-loader --d

（2）在main.js文件中引入lib-flexible,即设置自动调整页面比例

  import 'lib-flexible'

（3）还要在index.html中把这样的语句删除，否则将根据已有的meta标签来设置缩放比例

（4） 在build —> util.js文件中，添加px2remLoader配置

//	utils.js
  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
	  loader: 'px2rem-loader',
	  options: {
	    remUnit: 75      //设计稿的宽度/10
	  }
	}

还要在loaders里面加入px2remLoader

 function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
    // ……
   }

（5）在index.vue文件中使用px单位的时候，就能自动转换为rem了，并且调整屏幕大小的时候，也能自动缩放比例
注意：不需要转化的，如1px比较小，不需要转化成rem，可以在样式后面加 /no/

.hello{
		width: 375px;
		height: 100px;
		border:1px solid #ccc;     /*no*/
	}                                      

2、动态设置字体，在scss文件中通过函数将rem转换为px
（1）在index.html中动态设置字体大小

<script>
// 取得屏幕宽度 
	  var devicewidth = document.documentElement.clientWidth || document.body.clientWidth
// 动态设置 html font-size 值
	  document.getElementsByTagName('html')[0].style.fontSize = devicewidth / 10 + 'px';
</script>

（2）在scss文件中定义函数

	@function wh($px) {
	  // rem基准值
	  $rem: 75px;               //设计稿的宽度/10
	  @return ($px/$rem) + rem;
	}

（3）使用

width : wh(750px);     //在浏览器打开，就可以转换为10rem了

（4）如果是webapp，要适配电脑和ipad等大屏幕，还要结合css3的@media 查询,针对不同的屏幕尺寸设置不同的样式

@media only screen and (min-width: 1024px){
    html,body{
        font-size:50px !important;
        max-width:750px;
        margin: 0 auto;
    }
}

@media (min-device-width :768px)and (max-device-width : 1024px) {
    html, body {
         font-size: 70px !important;
         max-width: 750px;
         margin: 0 auto;
    }
}
@media (min-device-width :720px)and (max-device-width : 768px){

    html,  body {
        font-size: 50px !important;      
        margin: 0 auto;
    }
}
@media (min-device-width :480px)and (max-device-width : 720px){
    html, body {
        font-size: 45px !important;      
        margin: 0 auto;
    }
}