vue+vant-ui移动端适配 宽高

一：在vue中安装vant

1.npm i vant -S

2.npm i babel-plugin-import -D

// 在.babelrc 中添加配置

{

"plugins": [

["import", {

"libraryName": "vant",

"libraryDirectory": "es",

"style": true    }]

]

}

3.main.js中引入

import 'vant/lib/index.css';

Vue.use(Vant);

这样就可以全局使用啦！

其次再说说宽高问题！这里总结了几种方法，希望对宁有用！

我在写项目的时候看了很多博客，都以为是 16px=1rem ，所以大意了，我拿所有量的px除以16，后来写着写着就不对劲了，大家千万别步入我的后路，在这普及一下，什么是rem！

rem是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

em是指相对于父元素的字体大小的单位。

没错第一种方法就是用rem，当然不是除以rem，而是通过淘宝已经封装好的方法，调用设置！

二：rem适配下载

1.npm i lib-flexible --save-dev

main.js引入适配： import 'lib-flexible/flexible'

如何使用：参考https://blog.csdn.net/bbsyi/article/details/80666756

2.安装postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem

"postcss-pxtorem":{

　　　　　　rootValue:75,//设计稿为750

　　　　　　propList:['*'],

　　　　　　selectorBlackList:['van']//排除van

　　　　}

3.CSS的@media，媒体查询

例如：

@media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css"

这段代码的意思是：如果屏幕宽度小于600像素（max-device-width: 600px），就加载css600.css文件。
如果屏幕宽度在600像素到980像素之间，则加载css600-980.css文件

@media (max-width: 600px) { .mainner { display: none; } }