一、原理

css代码写1rem 等同于 页面的font-size的尺寸

原生写法：

const docEl = document.documentElement
function setRem() {const rem = docEl.clientWidth / 10docEl.style.fontSize = rem + "px"
}
window.addEventListener('resize', setRem())
window.addEventListener('pageShow', setRem())

二、vue项目实战中如何实现适配

使用 amfe-flexible postcss-pxtorem（5.1.1版本） 插件

 amfe-flexible 在main.js中引入即可

import "amfe-flexible"

 postcss-pxtorem 

新建postcss.config.js文件

module.exports = () => ({plugins: [// autoprefixer 自动补齐 CSS3 前缀，适配不同浏览器require('autoprefixer')({overrideBrowserslist: ["last 10 versions", // 所有主流浏览器最近10版本用],}),require('postcss-pxtorem')({rootValue: 192.0, //设计稿元素尺寸/10，这里设计稿宽度为1920propList: ["*"], //是一个存储哪些将被转换的属性列表，这里设置为['*']全部，假设需要仅对边框进行设置，可以写['*', '!border*']unitPrecision: 3, //保留rem小数点多少位selectorBlackList: ['el-input', 'el-step', 'no-'],//则是一个对css选择器进行过滤的数组，比如你设置为['el-']，那所有el-类名里面有关px的样式将不被转换，这里也支持正则写法。replace: true, mediaQuery: false, //媒体查询( @media screen 之类的)中不生效// minPixelValue: 3, //px小于3的不会被转换})]});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！