深圳画册设计公司排行榜_权威的建筑工程网站_友妙招链接_seo软件视频教程

一、在index.html头部加入手机端自适应meta

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

二、vue项目中使用postcss-pxtorem

1. 安装插件

npm install postcss postcss-pxtorem --save-dev

2. 插件的基本配置
   根目录下创建postcss.config.js文件

export default {plugins: {'postcss-pxtorem': {rootValue: 1, // 表示根元素字体大小或根据input参数返回根元素字体大小unitPrecision: 5, // 单位转换后的精度/***  使用通配符 * 以启用所有属性。例如：['*']在单词的开头或结尾使用 *。（['*position*'] 将匹配 background-position-y）使用 ! 来排除某个属性。例如：['*', '!letter-spacing']可以将 "not" 前缀与其他前缀结合使用。例如：['*', '!font*']*/propList: ['*'], // 需要做转化处理的css属性  * 就是所有属性都要转换，如`hight`、`width`、`margin`等，`*`表示全部// 若想设置部分样式不转化 可以在配置项中写出// eg: 除 border和font-size外 所有px均转化为rem// propList: ["*", "!border","!font-size"],// exclude: /node_modules/i, // 这里表示不处理node_modules文件下的cssselectorBlackList: ['ignore-'], // 过滤掉ignore-开头的class，不进行rem转换// mediaQuery: false, // 是否在媒体查询中也转换 pxminPixelValue: 2, // 最小px为2，如果设置1px则不转remreplace: true, // 是否更换属性值，而不是添加一个rem的新属性}}
}

3. 自定义配置rem基数
   app.vue

<script setup>
import { RouterView } from 'vue-router'
import { onMounted, onBeforeUnmount } from 'vue'/*** resize 重新计算方法*/
const resize = () => {const deviceWidth = document.documentElement.clientWidthdocument.documentElement.style.fontSize = deviceWidth / 375 + 'px'
}onMounted(() => {resize()window.addEventListener('resize', resize)
})// 销毁钩子函数
onBeforeUnmount(() => {window.removeEventListener('resize', resize)
})</script><template><RouterView />
</template><style scoped>
header {line-height: 1.5;max-height: 100vh;
}.logo {display: block;margin: 0 auto 2rem;
}nav {width: 100%;font-size: 12px;text-align: center;margin-top: 2rem;
}nav a.router-link-exact-active {color: var(--color-text);
}nav a.router-link-exact-active:hover {background-color: transparent;
}nav a {display: inline-block;padding: 0 1rem;border-left: 1px solid var(--color-border);
}nav a:first-of-type {border: 0;
}@media (min-width: 1024px) {header {display: flex;place-items: center;padding-right: calc(var(--section-gap) / 2);}.logo {margin: 0 2rem 0 0;}header .wrapper {display: flex;place-items: flex-start;flex-wrap: wrap;}nav {text-align: left;margin-left: -1rem;font-size: 1rem;padding: 1rem 0;margin-top: 1rem;}
}
</style>

4. 无法将内联样式和js中css的px转成rem