这篇文章主要讲解了“Vue项目中如何使用rem替换px”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue项目中如何使用rem替换px”吧！工具vue-cl
这篇文章主要讲解了“Vue项目中如何使用rem替换px”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue项目中如何使用rem替换px”吧！
vue-cli:使用脚手架来搭建vue前端项目
postCSS:就是postcss用js插件帮你转换css样式的一个工具。比如，这里的把你的文件里面16px替换成1rem(根大小默认16px的情况）；这样你就不用自己去算了！
cssrem:主要是帮你把px(UI设计给设计稿上的px)转换成对应的rem
然后：还要用js代码去动态算根目录应该有的字体大小，反正就是一段js代码去动态获取屏幕宽度
npm i postcss，postcss-pxtorem，postcss-loader，postcss-import，postcss-url然后再index.html里面加上
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">module.exports = {
"plugins": {
"postcss-import": {}, //用于@import导入css文件
"postcss-url": {}, //路径引入css文件或node_modules文件
"postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比
"postcss-write-svg": { utf8: false }, //用来处理移动端1px的解决方案。该插件主要使用的是border-image和background来做1px的相关处理。
"postcss-cssnext": {}, //该插件可以让我们使用CSS未来的特性，其会对这些特性做相关的兼容性处理。
"postcss-px-to-viewport": { //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
viewportWidth: 750, //视窗的宽度
viewportHeight: 1334, //视窗的高度
unitPrecision: 3, //将px转化为视窗单位值的小数位数
viewportUnit: "vw", //指定要转换成的视窗单位值
selectorBlackList: [".ignore", ".hairlines"], //指定不转换视窗单位值得类，可以自定义，可以无限添加
minPixelValue: 1, //小于等于1px不转换为视窗单位
mediaQuery: false //允许在媒体查询中使用px
},
"postcss-viewport-units":{}, //给vw、vh、vmin和vmax做适配的操作,这是实现vw布局必不可少的一个插件
"cssnano": { //主要用来压缩和清理CSS代码。在webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。
preset: "advanced", //重复调用
autoprefixer: false, //cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
"postcss-zindex": false //只要启用了这个插件，z-index的值就会重置为1
}
}
}当你切换不同尺寸的屏幕的时候，需要动态改变根字体的大小，一段简单的js插入在head里面：在public目录下直接新建的shipei.js,然后将这个js引入到index.html的head里面
//shipei.js
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize = Math.min(screen.width,document.documentElement.getBoundinGClientRect().width) / 750 * 32 + "px";
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32；懂的起撒，就是原本是750大小的32px;如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！是不是很简单
}
window.addEventListener("resize", autoRootFontSize);
autoRootFontSize();
})();<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta Http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/public.css" rel="external nofollow" type="text/css">
<link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >
<title><%= htmlWEBpackPlugin.options.title %></title>
<script src="/shipei.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>注意 放到 public 里的东西，可以不用写开头目录，脚手架打包的时候找不到，会去public文件夹找的
getBoundingClientRect().width获取到的其实是父级的右边距离浏览器原点(0,0)左边距离浏览器原点(0,0)的距离,即父级的宽度+2padding+2border。
此时的clientWidth等于父级的宽度+2*padding,不包括边框的宽度。
当不隐藏子级内容,即overflow为auto时，前者的宽度依然为这个数字,因为父级并没有改编盒模型。后者的宽度为上述得到的宽度-滚动条的宽度(17px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:hidden;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 400px; width: 600px; border: solid 3px #f00;">
</div>
</div>
</body>
</html>
<script type="text/javascript">
var divP = document.getElementById("divParent");
var divD = document.getElementById("divDisplay");
var clientWidth = divP.clientWidth;
var getWidth = divP.getBoundingClientRect().width;
divD.innerHTML += "clientWidth: " + clientWidth + "<br/>";
divD.innerHTML += "getWidth: " + getWidth + "<br/>";
</script>运行结果是clientWidth为516,他的计算是内容宽+2padding
getWidth(也就是getBoundingClientRect().width）包括内容宽+2padding+2border
第五步：就是将设计稿上的px转换成rem为单位：安装 cssrem插件 (在插件市场）：然后在 文件-->首选项-->设置 然后搜索cssrem 设置Root Font Size为16即可
感谢各位的阅读，以上就是“vue项目中如何使用rem替换px”的内容了，经过本文的学习后，相信大家对vue项目中如何使用rem替换px这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
--结束END--
本文标题: vue项目中如何使用rem替换px
本文链接: https://lsjlt.com/news/95869.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0