postcss-px-to-viewport 适配 uniapp
参考:https://uniapp.dcloud.io/component/page-meta?id=page-metamodule.exports = {css: {loaderOptions: {postcss: {plugins: [require(‘postcss-px-to-viewport‘)({unitToConv
·
参考:https://uniapp.dcloud.io/component/page-meta?id=page-meta
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require(‘postcss-px-to-viewport‘)({
unitToConvert: ‘px‘, // 需要转换的单位,默认为"px"
viewportWidth: 750, // 设计稿的视口宽度
unitPrecision: 5, // 单位转换后保留的精度
propList: [‘*‘], // 能转化为vw的属性列表
viewportUnit: ‘vw‘, // 希望使用的视口单位
fontViewportUnit: ‘vw‘, // 字体使用的视口单位
selectorBlackList: [], // 需要忽略的CSS选择器
minPixelValue: 1, // 最小的转换数值,如果为1的话,只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值,而不添加备用属性
exclude: /node_modules/, // 忽略某些文件夹下的文件或特定文件
include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换,例如只转换 ‘src/mobile‘ 下的文件 (include: /\/src\/mobile\//)
landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
landscapeUnit: ‘vw‘, // 横屏时使用的单位
landscapeWidth: 568 // 横屏时使用的视口宽度
})
]
}
}
}
}
1.base.js
export default {
created() {
const self = this;
},
mounted() {
const self = this;
},
methods: {
//设置字体
getRootFontSize(){
const self = this;
var fontSize = getApp().globalData.rootFontSize;
if(fontSize){
return fontSize;
}else{
fontSize = uni.getStorageSync('root_font_size');
if(fontSize){
getApp().globalData.rootFontSize=fontSize;
}else{
fontSize='12px';//默认字体大小
self.setRootFontSize(fontSize);
}
return fontSize;
}
},
setRootFontSize(fontSize){
uni.setStorageSync('root_font_size',fontSize);
getApp().globalData.rootFontSize=fontSize;
},
}
}
2.page-meta
<page-meta :root-font-size="getRootFontSize()"></page-meta>
3.引入
import base from '@/common/base.js';
export default {
extends: base,
4.页面事件
<template>
<page-meta :root-font-size="getRootFontSize()"></page-meta>
<view>
<view class="uni-padding-wrap uni-common-mt" style="margin-top: 50upx;">
<view class="titleBox">
<view style="font-size:25upx">A</view>
<view style="font-size:30upx">标准</view>
<view style="font-size:35upx">A</view>
<view style="font-size:40upx">A</view>
</view>
<view>
<slider min="10" max="16" :value="fontValue" @change="sliderChange" show-value step="2"/>
</view>
</view>
</view>
</template>
<script>
import base from '@/common/base.js';
export default {
extends: base,
data() {
return {
fontValue:12,
rootFontSize:'12upx',
fontStart:uni.getStorageSync('root_font_size') + '',
fontEnd:uni.getStorageSync('root_font_size') + ''
}
},
onLoad() {
const self = this;
//当前字体大小
self.fontValue = parseInt(self.getRootFontSize().split('px')[0]);
console.log(self.fontValue )
},
methods: {
sliderChange(e) {
console.log('value 发生变化:' + e.detail.value)
const self = this;
let nowFontSize = e.detail.value + 'px';
console.log(nowFontSize)
self.fontEnd = nowFontSize;
console.log(nowFontSize)
self.setRootFontSize(nowFontSize);
},
//这里设置一个事件,使用uni.reLaunch跳转到某个页面,并关闭所有页面
/*onNavigationBarButtonTap() {
uni.reLaunch({
url:"../tabbar-4"
})
}*/
}
}
</script>
<style>
.titleBox{
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 30upx 0;
margin-left: 5%;
}
</style>
5.统一单位
const path = require('path')
module.exports = {
parser: 'postcss-comment',
plugins: {
'postcss-import': {
resolve(id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
},
'autoprefixer': {
overrideBrowserslist: ["Android >= 4", "ios >= 8"],
remove: process.env.UNI_PLATFORM !== 'h5'
},
// 借助postcss-px-to-viewport插件,实现rpx转px,文档:https://github.com/evrone/postcss-px-to-viewport/blob/master/README_CN.md
// 以下配置,可以将rpx转换为1/2的px,如20rpx=10px,如果要调整比例,可以调整 viewportWidth 来实现
'postcss-px-to-viewport': {
unitToConvert: 'upx',
viewportWidth: 200,
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'px',
fontViewportUnit: 'rem',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: undefined,
include: undefined,
landscape: false
},
'@dcloudio/vue-cli-plugin-uni/packages/postcss': {}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)