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，这时候就可以看到正常的页面了。

vue项目使用rem布局刷新页面瞬间元素尺寸由小变大，页面闪现错乱样式的更多相关文章

  1. 移动端H5页面开发，碰到一个字体变大的BUG

    移动端H5页面开发,碰到一个字体变大的BUG webkit内核下,对不定高宽的元素可能会放大其字体.那么,就可以设置一个max-width:或者使用-webkit-text-size-adjust: ...

  2. vue 中使用rem布局

    在使用vue-cli搭建好项目框架后,在目录结构的index.html文件中添加一段js代码: fnResize(); window.onresize = function () { fnResize ...

  3. 关于vue项目去除margin和padding后设置元素width和height为100%后，出现滚动条问题（移动端）

    bug点,这个页面设置100%(100vw和100vh).页面出现抖动. 经过一番检察,原因出现在,vue项目自动添加的一个div上.就是body里的最后一个.如果选中这个元素,右键删除它.页面就不会 ...

  4. Spring Boot +Vue 项目实战笔记（二）：前后端结合测试（登录页面开发）

    前言:关于开发环境 每位 Coder 都有自己偏好的开发工具,从大的方面划分主要有文本编辑器流和 IDE 流两种,我有一段时间也喜欢用编辑器(Sublime Text.Vim),但对我来说开发效率确实 ...

  5. 【转】】Vue项目部署tomcat，刷新报错404解决办法

    转自[https://blog.csdn.net/g631521612/article/details/82835518] 解决方式: - 在tocmat的webapps下的项目中创建WEB-INF文 ...

  6. 手机端页面自适应解决方案-rem布局

    rem布局 布局前插入原生js即可 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationch ...

  7. VUE项目实现页面跳转

    打开一个VUE项目,目录结构是这样的: 如现在有两个页面aaa和HelloWorld,路由配置在index.js中: import Vue from 'vue' import Router from ...

  8. rem布局简介

    移动端常见布局: 1.流式布局 高度固定,宽度自适应 2.响应式布局 能够用一套代码适应不同尺寸屏幕 3.rem布局 宽高自适应,能实现整个页面像一张图片一样缩放且不失真的效果. rem布局: em: ...

  9. vue项目接入markdown

    vue 项目接入 markdown 最近做一个项目,需要在vue项目中接入 markdown 编辑器,其实这个好接,他没有什么特别的样式,男的就是图片的上传. 今天给大家推荐一个插件 :mavonEd ...

  10. vue项目刷新当前页面

    场景: 有时候我们在vue项目页面做了一些操作,需要刷新一下页面. 解决的办法及遇到的问题: this.$router.go(0).这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体 ...

随机推荐

  1. ACM 的正确入门方式是什么？

    作者:数学lover 链接:https://www.zhihu.com/question/51727516/answer/127265733 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权, ...

  2. mysql 存储国过程实现竖表变横表（将行数据值变为字段）

    示例: 表结构如下: CREATE TABLE `pressure` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增主键', `presurena ...

  3. (转)codeblocks 使用研究

    原帖:http://github.tiankonguse.com/blog/2014/10/11/codeblocks-shutcut.html 使用前 使用 codeblocks 前肯定是下载安装 ...

  4. ElasticSearch 实现分词全文检索 - 聚合查询 cardinality

    目录 ElasticSearch 实现分词全文检索 - 概述 ElasticSearch 实现分词全文检索 - ES.Kibana.IK安装 ElasticSearch 实现分词全文检索 - Rest ...

  5. C#实现的网易云音频下载器(白嫖)

    链接 下载点这里 主要是想白嫖音乐,但是java gui写的很复杂,python不会写,c#学的也是半吊子,大大佬们勿喷 经测试大部分音乐可以下载,部分会出现路径非法 form.cs的代码 using ...

  6. Spring 的核心组件详解

    Spring 总共有十几个组件,但是真正核心的组件只有三个:Core.Context 和 Bean.它们构建起了整个 Spring的骨骼架构,没有它们就不可能有 AOP.Web 等上层的特性功能. 一 ...

  7. XAML 设计器已意外退出。(退出代码: e0434352)

    一.前言 开门见山,这个问题我遇到过两次,第一次因为项目刚开始不长时间,我查了很长时间都没解决,然后就直接重写了,几乎一样的写法,但问题没复现了,但程序员思维告诉我,一定还是有比较关键的地方出现了问题 ...

  8. 图与网络分析—R实现（四）

    三 最短路问题 最短路问题(short-path problem)是图论理论的一个经典问题.寻找最短路径就是在指定网络中两结点间找一条距离最小的路.最短路不仅仅指一般地理意义上的距离最短,还可以引申到 ...

  9. python实现远程桌面

    项目旨在让大家理解远控软件的原理,通过远控桌面可以实现远程控制我们的电脑,更好更方便的管理电脑.文末将给出初始版的完整代码,需要使用到的其他工具也会有所说明.最终实现的效果就是只要用户点击了客户端的程 ...

  10. Java代理之jdk动态代理+应用场景实战

    本文将先介绍jdk动态代理的基本用法,并对其原理和注意事项予以说明.之后将以两个最常见的应用场景为例,进行代码实操.这两个应用场景分别是拦截器和声明性接口,它们在许多开发框架中广泛使用.比如在spri ...