Unity --- 三维数学 --- 欧拉角与四元数

1、安装过程请点击移步

postcss-pxtorem官网解释点击进入

2、这里只修改了1中的如下部分

postCssPxToRem({
    
    
  // rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
  rootValue ({
     
      file }) {
    
    
    // 如果是 Vant 的样式就按照 37.5 处理转换
    // 如果是我们自己的样式就按照 75 处理转换
    // console.log(file)
    return file.indexOf('vant') !== -1 ? 37.5 : 75
    // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
    // 多少就直接写多少即可,不用除以2了
  },
  propList: ['*'], // 需要转换的属性,这里选择全部都进行转换
  

  // 只修改这个部分  The selectors to ignore 意思是要忽略的选择器,也可以用正则匹配
  // /^\.aaa$/这个点要写上,意思是以.开头以aaa结尾的
  selectorBlackList: ['van', 'jjw', /^\.aaa$/]  
  // exclude()
})

3、app.vue中的内容如下:

<template>
  <div class="van-test">van-test</div>
  <div class="vvvan-test">vvvan-test-test</div>
  <div class="test">avan-test</div>
  <div class="jjw">jjw-test</div>
</template>
<script setup>

</script>

<style scoped lang="less">
// 页面原样显示出来px没有转rem,说明以van开头的过滤掉了
.van-test{
      
      
  height: 50px;
  background-color: pink;
}
// 页面原样显示出来px没有转rem,说明只要包含van的都会被过滤掉
.vvvan-test{
      
      
  height: 50px;
  background-color: greenyellow;
}
// px转换成了rem
.test{
      
      
  height: 50px;
  background-color: deeppink;
}
// 原样显示,px没有转rem,说明可以排除多个
.jjw{
      
      
  height: 50px;
  background-color: yellow;
}

</style>

4、显示结果:

在这里插入图片描述
在这里插入图片描述

exclude:(String, Regexp, Function) The file path to ignore and leave as px.表示的是排除以文件形式设置的样式例如:

selectorBlackList: ['van', 'jjw', /^\.aaa$/],  // /^\.aaa$/这个点要写上,意思是以.开头以aaa结尾的
//以下两种均可,作用就是排除路径中包含test的即路径包含test的他们的px不用转成rem
// exclude: /test/
exclude: 'test'

app.vue中的style中导入样式

<style scoped lang="less">
@import "assets/test";  // 将样式导入

test.less中的内容:

.box{
    
    
  height: 50px;
  background-color: palegreen;
}

结果显示如下:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_51947882/article/details/129805035