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

 

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

"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; } }




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

上一篇:蓝桥杯 2021/10/31 基础练习 进制转换


下一篇:安卓模拟器如何多开窗口保证游戏不封号