rem布局进入页面样式错乱解决

最新推荐文章于 2021-10-22 17:40:35 发布
最新推荐文章于 2021-10-22 17:40:35 发布
阅读量528 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lhl66/p/7701242.html
本文介绍了一种解决REM布局加载瞬间样式错乱的方法，通过使用JavaScript动态调整根元素字体大小，并结合jQuery延迟显示body内容，确保页面加载时样式正确显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

开发项目时候第一次遇到rem布局进入页面瞬间样式错乱问题：

//该段js为rem布局应用  如10px = 0.1rem;
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            if(clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                //alert(clientWidth);
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

解决方案（jq）：先设置body如下图，然后再显示

<body style="display: none;"> 

$("body").css("display","block")

input框呼起键盘（必须禁用方法如下）：

<input class="preDate" type="text" placeholder="请输入预产期" onfocus="this.blur();" />

 

转载于:https://www.cnblogs.com/lhl66/p/7701242.html

小程序跳转样式布局错乱_小程序webview无法自适应问题？跳转页面出现样式错乱问题。...
weixin_35633340的博客
02-05 1238
小程序webview无法自适应问题？跳转页面出现样式错乱问题。The problem that the applet webview cannot be adapted? The style of the jump page appears disorderly.小程序webview无法自适应问题？跳转页面出现样式错乱问题。第一次进入web-view样式是正常的， 然后web-view跳转到小程序...
【Vue】解决设置html根字体大小，但使用rem在某些手机浏览器样式错乱问题
y_coder的博客
06-14 680
首先不知道为什么如下代码在html中如下写在某些浏览器（比如华为自带的浏览器）中不生效，但是在手机端edge浏览器没问题。我调试了下发现在那些不生效的浏览器他貌似不能识别@media (max-width: 550px)这个媒体选择器，用的还是根目录设置的字体大小。于是我尝试使用js来设置根目录字体大小，如下所示，你可以根据自己的需要更改下面的代码。
在使用rem布局的时候，遇到的样式排版混乱问题，
weixin_30785593的博客
03-07 889
在使用rem布局的时候，遇到的样式排版混乱问题， 问题1：设置字体为rem单位，但是没有设置line-height为100%， 即 * { line-height: 1; } 可以解决行高引起的排版问题。 转载于:https://www.cnblogs.com/LXG97/p/10490901.html...
rem布局，系统字体大小发生变化是，页面样式错乱的问题
悦己
02-16 4703
最近做的一个APP，昨天测试的时候，发现在大多数手机上页面用rem布局，都是可以适配的，但是在一些手机上（比如三星A8000,默认字体大小比较大）出现了混乱，看上去像是宽度不够，有些元素被挤下来，整个页面被拉伸了一些，后来打印出当前页面根元素的字体大小，我设置的100px，但在这些手机上都是比100px大，因为这些手机系统设置的字体大小，比较的大，这时候，可以让安卓的小伙伴们，在每个webview
移动端开发rem实现屏幕适配及处理页面加载页面坍塌样式错乱网页闪烁问题
mm
02-04 770
rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小 问题的原因无非就是html一开始没有设置字体大小嘛，那我们就一开始按最常用的iPhone 6 尺寸，设置html的font-size: 50px;好了，设置html的font-size: 50px;就合理了吗？我的回答是，至少变化的范围非常小，以360px宽的设备为例，根字体大小应该是48px；以前相当于是从0px-48px，现在是50px-48px，不会造成很明显的闪烁问题。 至于为什么设置为50px；首先，设计稿是基于750px.
rem使用后页面布局瞬间错乱的问题
xin00guang的博客
08-31 4099
  问题: 移动端项目中使用了rem.js, 里面的加载项为'load', 如果网络情况非常慢, 页面资源(如图片,视频)非常大,  就会造成rem.js暂时无效,  页面会瞬间没有样式. 因为此时,html的font-size并没有被改变, 1rem = 16px .   解决: 1.  在css中提前设置fon-size的大小 2. 将rem中执行的load换为DOMCon...
rem布局加载闪烁问题
热门推荐
前端向朔
09-11 1万+
先上体验地址：http://jiguang.qq.com/jiguang_app/kapian/html/card-query.html?from=singlemessage扫描二维码：问题rem布局在加载的时候会出现元素一开始很小，闪烁一下恢复正常大小，这是怎么回事呢？为此，我们来探讨一下！rem的布局具体不介绍了吧，你应该已经掌握或者会用了。这里我的设计稿是750px的，以下是我用来动态设置ht
Vue移动端适配并解决rem影响第三方ui库样式问题
weixin_44602430的博客
10-22 991
Vue移动端适配并解决rem影响第三方ui库样式问题 一、项目中安装lib-flexible npm install lib-flexible --save 二、在项目的入口main.js文件中引入lib-flexible import 'lib-flexible' 三、安装postcss-px2rem-exclude npm install postcss-px2rem-exclude --save 四、配置 postcss-px2rem-exclude 1.在项目的根目录下找到文件.postcss
vue3使用Vant Design 兼容低版本浏览器 Modal 样式错乱解决方案
最新发布
06-27
我们正在解决Vue3+VantDesign项目在低版本浏览器中Modal样式错乱的问题。根据引用内容，我们可以从以下几个方面入手：1.**配置Vite以支持旧版浏览器**：在vite.config.js中配置`@vitejs/plugin-legacy`插件，它会为...
使用REM布局技术实现移动终端自适应和整体缩放设计
在现代Web开发中，响应式布局是网站能够适配不同屏幕尺寸的移动终端的重要技术之一。...通过阅读相关的博文，开发者们不仅能够掌握rem布局的技术细节，还能够了解布局设计中的最佳实践以及可能遇到的问题和解决方案。
如何利用vw+rem进行移动端布局
11-20
你还在用rem弹性布局吗？在html文件头部放入一大段压缩过的js代码，是不是让你很难受？来了解下vw吧，能让你的代码更纯粹 简单介绍下rem布局方案 rem是css中的长度单位，1rem=根元素html的font-size值。当页面中所有元素都使用rem单位时，你只需要改变根元素font-size值，所有元素就会按比例放大或者缩小。因此我们只需要写一小段js代码，根据屏幕宽度改变html的font-size值，就可以做到弹性布局。这种方法确实便捷，兼容性也很好，是目前非常主流的弹性布局方案。但这种方案有弊端（弊端之一：和根元素font-size值强耦合，系统字体放大或缩小时，会导致布局错乱；
关于uniapp将H5网页编译为微信小程序样式错乱
Hello，this is cirzear
02-26 4406
在控制台看了下出现警告Some selectors are not allowed in component wxss, including tag name selectors, ID selectors, and attribute selectors（组件wxss中不允许使用一些选择器，包括标签名称选择器、ID选择器和属性选择器） 这时将以上这些选择器换成类名选择器或别的选择器即可解决样式混...
根元素 font-size 的改变，带来的问题
5yue的博客
10-15 1662
原始的 rem ，是这样计算的。rem 值 = px值 / 16（浏览器 font-size 默认值）; 为了更好的使用 rem ，我们要设置文档根元素的 font-size 值（通常是 font-size = 100px）。 html{ font-size: 100px; } 此时 rem 的计算方法是：px 值 / 100 （此时浏览器的根元素 font-size = 100px）...
简单解决js计算rem单位首次加载页面瞬间布局错乱的问题
caimingxian401的博客
04-15 3952
在写移动端布局时，有些人喜欢用单纯的CSS+百分比来控制字体单位，而有些人则喜欢用js来计算字体的单位以及处理屏幕兼容。这种方法其实是挺不错的，比用媒体查询能减少能多的后期处理。但是相信用过这个方法的人不少都会发现，在我们首次打开页面的时候，有时会出现一闪而过的布局错乱的问题，虽然只是短短的一瞬间，但每次看到都会让人觉得很不舒服。 (function() { document.addEvent...
解决移动端rem加载瞬间页面错乱的方法（放大或者缩小）
lily2016n的博客
10-19 7043
页面在加载未完成前会出现瞬间错乱的现象，虽然时间不算长，但是肉眼可见，必须解决页面加载顺序通常是”从上往下”加载的，所以在内容区域，也就是body以及body包含的DOM还未被浏览器遍历之前，我们就应该将html的font-size计算好。于是乎，我们应当把计算字体的js放在body之前，解决方法参考网址
页面跳转样进入页面样式混乱错位但是刷新页面后又好了
WebDestiny的博客
09-04 5862
原因：要是同样的样式，前面已经加载过了，浏览器在跳到下个页面相同的样式就不会再重新加载了。在起名的时候可以自行区分，也可以根据官网的提示，在页面的style中加上scoped <style scoped></style>这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，也就是给你定义的名字前加一串哈...
移动端rem布局，加载瞬间页面缩小
maggie_live的博客
07-07 4172
   在移动端rem布局在加载渲染页面的时候会出现元素由小到恢复正常一个现在。项目的设计稿是以750px，用以下代码设置html根元素font-size的代码。    在完成整个页面的时候，我们在手机就看到了加载元素会先变小后恢复正常。1.js加载顺序与加载方法  页面加载顺序通常是“从上往下”加载的，所以把上面这段代码发在head内，但还是出现上述问题。在网上也查找一些资料，换成原生写法，优化加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值