vue中rem自适应处理px-rem转换-vue使用媒体查询media

安装felxible

npm i lib-flexible -S

然后在主文件main.js里面引入

 import  'lib-flexible'

在index.html文件中设置meta标签:

 <meta name='viewport' content='width=device-width , initial-scale=1.0'>

然后在项目中写css时会自动将rem转化为px,需要安装px2rem这个工具

npm i px2rem-loader -D

在until.js配置文件对loader做相关配置:

在cssLoader对象下面添加一个px2remLoader对象

  const px2remLoader = {
    loader : 'px2rem-loader',
    options : {
      //这个参数是通过psd设计稿的  宽度 / 10 来计算,这里以750为标准
      remUnit : 75  
    }
  }

然后将utils.js文件中的generateLoaders函数的loaders常量改为[cssLoader, px2remLoader]

const loaders = [cssLoader, px2remLoader];

这样就做完了所以配置,当你做开发时,只需要将设计稿上面量到的尺寸写出来就可以了,比如font-size:18px;就直接写18px就可以

vue使用媒体查询media

.item {
width: 33%;
height: 262px;
transition: all 0.5s ease;
	@media screen and (min-width: 200px) and (max-width: 500px) {
		height: 3rem;
	}
}