vue3rem

news/2024/7/10 0:40:46 标签: vue
1.安装两个插件
npm i postcss-pxtorem -S
npm i amfe-flexible -S
vue3vueconfigjsCSS_5">2.根据vue3提供的新配置方法,在vue-config.js中对CSS做配置:
const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css:{
      sourceMap:false,
      loaderOptions: {
        postcss: {
          plugins: [
            autoprefixer(),
            pxtorem({
              rootValue: 37.5,
              propList: ['*']
            })
          ]
        }
      }
    }
}
3. rootValue 75.0的值其实就是代表ui设计稿的750px的像素,引用的时候css直接写宽750px就相当于100%,它会自动根据屏幕进行计算成rem,无需对原测量值进行REM的换算(这里推荐37.5,结合2x的设计图开发,因为vant的组件你会发现37.5更为适合)。
4.在main.js文件夹下引入
import 'amfe-flexible';

http://www.niftyadmin.cn/n/1367739.html

相关文章

vue3初识

1.vue3中变量写法 import { reactive} from "vue"; export default {setup() {const state reactive({value: "",ids: "",bannerImg: "",sightName: "",gallaryImgs: [],categoryList: []});//注意return出去return { sta…

require与import的区别和使用(CommonJS规范和es6规范)

CommonJS的由来 在早期没有模块化思想时代码没有很好的编写规范,导致很多代码、逻辑重复、缺乏条理性且不易管理维护,这也让很多开发者头疼不已。随着JavaScript 社区的发展,社区为JavaScript制定了相应的规范,而CommonJS规范的提…

elementUi中tree组件获取父节点的id

在tree组件中用current-change"getLeafKeys"事件 methods中 (b是tree组件获取的node) getLeafKeys(a,b){var parentList []function getParent (node) {// 判断当前节点是否有父节点,并且父节点上的data不能是数组if (node.paren…

搜素模糊查询可以大小写

//leafname 查询输入的值 nodes循环的数据 path内部使用 function findPathByLeafId(leafname, nodes, path) {if (path undefined) {path []}for (var i 0; i < nodes.length; i) {var names nodes[i].name if (names.toLowerCase().includes(leafname) true) {path.…

jsplumb连线的数据

var g_MyJsPlumb null;funInitJSPlumb function() {g_MyJsPlumb jsPlumb.getInstance({Endpoint:["Dot", { radius: 7 }], // 端点形状ConnectionOverlays: [["Arrow", { width: 12, length: 12, location: 1 }]], // 连线样式 装饰属性 箭头Connecto…

点击空白页面隐藏弹窗

<p class"parameter" v-clickoutside"handleClose" click"processParameters">点击</p><script> const clickoutside {// 初始化指令bind(el, binding, vnode) {function documentHandler(e) {// 这里判断点击的元素是否是本…

正则将回车或换行转换成逗号

//将将回车后换行转换成逗号 String.replace(/\r|\n/g,,) //字符串将逗号转换成换行 String.replace(/[\,]/g,\n)

element ui中el-tree横向和竖向滚动条问题

.tree{overflow-y: hidden;overflow-x: scroll;width:100%;height: 700px;overflow: auto;}.el-tree {min-width: 100%;display:inline-block !important;}