菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 前端-范建荣-20230628 [打印本页]

作者: °荣 时间: 2023-6-28 19:15
标题: 前端-范建荣-20230628
一、学习内容
先测试单位会不会变为em，编写app.vue
<template> <div id="app"> <div class="test"></div> </div></template>.test{ width: 100px; height: 100px; background-color: red;}
安装：postcss-pxtorem
npm install postcss-pxtorem -D

module.exports = {

plugins: {

autoprefixer: {},

'postcss-pxtorem': {

rootValue: 100, // 根元素字体大小

// 只有宽度高度需要转rem，其他不需要转换

propList: ['width', 'height']

}

这样只有宽度高度需要转rem，其他不需要转换。

但后面还有margin padding等，不断添加很麻烦，所以还是写成转换全部，在px不需要转换的时候大写就不会转em了

propList: ['*']

App.vue中将 .test{ width: 100Px;}

所以我们的variable.scss中所有字体单位的Px都大写

二、是否遇到问题
无
三、是否解决

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)