vue项目使用px2remLoader插件将px转为rem之后加载瞬间尺寸由小变大，页面闪现错乱样式

最新推荐文章于 2024-06-21 15:14:18 发布

a小毛同学

最新推荐文章于 2024-06-21 15:14:18 发布

阅读量1.8k

点赞数

文章标签：前端 vue 首页刷新页面样式错乱

本文链接：https://blog.csdn.net/mao871863224/article/details/111356936

版权

vue项目使用px2remLoader插件，在index.html自定义设置font-size的大小，尤其是在首屏加载的时候，会出现页面各个元素尺寸由小变大的一个过程，很难看

刚开始一直在想是不是因为css文件过大，加载的时候先渲染了页面，然后css文件加载完之后样式才恢复正常，后来使用gzip压缩了打包的文件之后还是这样，（使用gzip打包可以减少打包文件体积，减少首屏渲染的时间，详见https://blog.csdn.net/mao871863224/article/details/111468986），还使用了v-cloak方法，并没有生效。转换思路，最后发现是px转rem的原因！

在index.html文件中自定义了px转rem的font-size的规则

<!DOCTYPE html>
<html lang="en">
	// 头部自己定义
	<head></head>
	// 一进来默认看不见
	/* 这一个样式****** */
	<body style="opacity: 0">   
		<div id="app"></div>
	</body>
	<script>
		setRem() {
			//这里自己定义px转rem的转换规则
			
			//在改变窗口大小或者加载完成之后所有的尺寸都已转变后执行下面这一句，把body的透明度设为1
			document.getElementsByTagName("body")[0].style.opacity = '1'   // ******
		}
		// 改变窗口大小时重新设置 rem
		window.onresize = function () {
		   setRem()
		}
		// 加载完成
		window.onload = function () {
			setRem()
		}
	</script>
</html>

以上，完美解决问题，原理就是样式错乱的时候透明度为0，让用户看不见，加载好了透明度为1，这时候就可以看到正常的页面了。

a小毛同学

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue项目使用px2remLoader插件将px转为rem之后加载瞬间尺寸由小变大，页面闪现错乱样式

vue项目使用px2remLoader插件，在index.html自定义设置font-size的大小，尤其是在首屏加载的时候，会出现页面各个元素尺寸由小变大的一个过程，很难看刚开始一直在想是不是因为css文件过大，加载的时候先渲染了页面，然后css文件加载完之后样式才恢复正常，后来使用gzip压缩了打包的文件之后还是这样，（使用gzip打包可以减少打包文件体积，减少首屏渲染的时间，详见），还使用了v-cloak方法，并没有生效。转换思路，最后发现是px转rem的原因！在index.html文件中自定义了
复制链接

扫一扫