postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值
4.1安装
npm install postcss-pxtorem lib-flexible --save-dev
4.2postcss配置
在项目目录下新建文件postcss.config.js
postcss.config.js
//postcss的配置
module.exports = {
plugins: {
autoprefixer: {
browsers: ['Android >= 4.0', 'iOS >= 8'],
},
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['\*'],
},
},
};
4.3引入 lib-flexible
main.js
//引入lib-flexible 用于设置rem基准值
import "lib-flexible/flexible"
rem详解
1rem等于html根元素设定的font-size的px值，vantui设置rootValue： 37.5，则1rem 等于 37.5px 等于 设备的宽度/10
切换不同的机型， 根元素有不同的font-size， 当写css px样式时， 会被程序换算成rem达到适配 使用vant组件，
需要按照rootValue：37.5来写样式
举个例子： 一张750px * 1334px图片， 在iphone6上铺满屏幕， 其他机型适配
当rootValue：75， 样式width：750px；height：1334px；图片会撑满iphone6屏幕，切换其他机型图片同样撑满屏幕
当rootValue：37.5， 样式width：375px；height：667px；图片会撑满iphone6屏幕
配置完如下图所示说明配置成功
<html data-dpr="1" style="font-size: 41.4px;"></html>
5.Tabbar标签栏的使用
5.1初始化项目
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
Home.vue
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'Home',
};
</script>
5.2引入
App.vue
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
components: {
[Tabbar.name]: Tabbar,
[TabbarItem.name]: TabbarItem,
},
}
</script>
5.3路由模式
标签栏支持路由模式，用于搭配vue-router使用。路由模式下会匹配页面路径和标签的to属性，并自动选中对应的标签
App.vue
<router-view/>
<van-tabbar route>
<van-tabbar-item replace to="/" ic
最低0.47元/天 解锁文章
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
