先贴上我的rem布局的一段js:
window.οnlοad=function(){
setRemSize();
window.addEventListener("resize",setRemSize,false);
function setRemSize(){
var _clientWidth = document.documentElement.clientWidth/7.2+'px';
document.documentElement.style.fontSize = _clientWidth;
};
在页面的<body>之前加上这段代码，并且设置html的font-size:100px即可，这样1rem即为100px；当设计图上的大小为300px*100px时，rem高度应该是3rem*1rem;
这种布局非常简单，但是在APP上加载时会出现页面先放大后又缩小的情况，这时只要把上面那段代码的window.onload事件去掉就可以。
先贴上我的rem布局的一段js:window.onload=function(){setRemSize();window.addEventListener("resize",setRemSize,false); function setRemSize(){ var _clientWidth = document.documentElement.clientWidth/7.2
在做H5
页面
时
，如果主页的元素内容比较多，可能就会导致
页面
第一次
加
载
时
，会
先
放大
然后在恢复
正常
，影响用户体验，从网上查找了一些解决办法，觉得比较近好的的有2种方式，我采用是第一种方案，如下：
将此脚本放到body标签前，就可以解决此问题，但是有个瑕疵，还是有点闪动，效果行。
<script type="text/javascript">
function re...
页面
在
加
载
未完成前会出现瞬间错乱的现象，虽然
时
间不算长，但是肉眼可见，必须解决
我们知道
页面
加
载
顺序通常是”从上往下”
加
载
的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。
所以我们应当把计算字体的js放在body之前
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport"
在移动端
rem
布局
在
加
载
渲染
页面
的
时
候会出现元素由小到恢复
正常
一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。
(function (doc, win) {
var docEl = doc.documentElement,
isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? ...
1，
rem
布局
，现在普遍常用的方法
一般ui设计师给的
页面
都是640的，所以document.documentElement.clientWidth/6.4+"px";项目中，在ps中量的尺寸直接除以100,后面写
rem
就可以了。
window.onload=function(){
//1.首次
加
载
的
时
候 调用动态设置
rem
的api
set
Rem
Size();
写APP
页面
的
时
候遇见坑，
布局
使用
rem
，但是
再
页面
渲染
加
载
时
出现变形，虽然
时
间非常短，但是肉眼可见，于是爬坑，1，在
页面
body
加
载
前引入html font-size计算js(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientati...
1 body 或者html
加
个visibility：hidden; 或者用opacity：0；
<body style="visibility: hidden;"></body>
2 使用
rem
加
载
完成后的函数调用 body属性的visbility：visible;
(function(doc, win) {
var ...
app.config.globalProperties.$
rem
= function (px) {
const baseFontSize = 16
return px / baseFontSize + '
rem
'
app.mount('#app')
在需要使用
rem
布局
的组件中，可以使用以下代码：
<template>
<div :style="{ fontSize: $
rem
(32) }">这是一个使用
rem
布局
的文字</div>
</template>
其中，$
rem
(32)表示将32px转换为
rem
单位。
