规范用法！移动端用rem单位布局，判断块与块的距离要慎重

最新推荐文章于 2021-12-31 16:25:21 发布

初仔仔

最新推荐文章于 2021-12-31 16:25:21 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/iqiao/p/9714872.html

本文讨论了在移动端使用rem单位进行布局时，可能出现的offset高度与scrollTop值不一致的问题。特别指出，在编写脚本解决此类问题时，应使用$(window).load()确保页面加载完成后再执行。文章还强调，在使用mui框架时，此问题尤为显著。

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

移动端用rem单位布局，会产生offset高度跟scrollTop值得不一致，在写脚本的时候，一定要用

$(window).load(function () {}包住，

特别是用mui框架的时候

转载于:https://www.cnblogs.com/iqiao/p/9714872.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

初仔仔

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

聊聊安卓折叠屏给交互设计和开发带来的变化

阿里云云栖号

05-17

1278

很多年前，前端同学都觉得PC端的适配（兼容处理）难，都认为移动端的时代适配会容易得多，也无需考虑那么多的事情。事实并非如此，移动端的时代同样面临着各种适配的处理。特别是刘海机的出现，前端需要考虑刘海机适配。而如今随着三星Galaxy Fold和华为Mate X折叠屏手机的面世，前端同学接着又要处理折叠屏幕的适配。就我们团队而言，在上个月就接到相关的通知，需要处理折叠屏的适配。碍于真机难得，前段...

最全面、最详细web前端面试题及答案总结

热门推荐

HanXiaoXi_yeal的博客

02-01

3万+

2021最全面、最详细web前端面试题及答案总结总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript

参与评论您还未登录，请先登录后发表或查看评论

H5行级元素水平距离和块级元素上下距离

xuemoKingDeath的博客

04-23

4429

html> html lang="en"> head> meta charset="UTF-8"> style> *{ padding: 0; margin: 0; } #span1{ background-color: #4d2e83;

手机端自动判断 rem

水中熊的博客

02-16

353

手机端自动判断 rem// 手机端自动判断 rem <script type="text/javascript"> (function() { var b = document.documentElement, a = function() { var a = b.getBoundingClientRect().width; var a = a < 6

移动端Web适配单位rem的坑,oppo r9手机出现错位bug

weixin_30438813的博客

12-22

621

我们做了一个抽奖的H5活动页面,被一个oppo R9手机客户反馈,抽奖的转盘错位了.刷新了好几次都不行.网上百度一搜真的有部分安卓手机有坑.赶紧修复bug.分享完整的rem.js代码出来.各位看官自己去核对你们的js是不是和我分享的不一样.请尽快修复bug.免得被祭天吐槽~ //rem.js(function(doc, win) { var docEl = doc.documentEle...

简单的移动端自适应适配rem

weixin_38779534的博客

10-16

303

写给初级前端的面试经验

爱前端也爱恋爱

10-29

1636

最近到了金三银四的跳槽季，很多人都会面临跳槽找工作，并且再过几个月又会到毕业季，越来越多的毕业生会面临这个问题。同样，我们组因为业务需要（我们今年倒是还没有人员离职，感动╭(╯^╰)╮）需要进行社招，我最近看了不少简历，并且对一些小伙伴进行了电话沟通（电面），对面试找工作有一些自己浅薄的观点因为个人认为本人的技术还是很菜的，并且工作经验也没有特别丰富，所以文章内容都是自己一些浅薄的看法观点，若有不对之处，欢迎大家指出，不喜勿喷啊~~~ 本篇文章可能只是适用于初级前端，也就是刚毕业的大学生或者毕业

页面自适应与rem

ccp0119的博客

07-18

523

在写前端页面的时候经常会用到rem,也在网上看了别人对rem的介绍，详细的情况就不在此描述，只说一下我对rem的看法和用法。在我看来，rem 是一种相对的尺度，相对于根元素设置的font-size，比如： html { font-size: 16px; } 那么，在别的地方使用rem的时候 1rem 就会等于 16px。这算是对rem最基础的应用，但是这种使用方式和直接使用px没有任何区...

【HTML5移动端开发】[rem + 百分比布局] 加载抖动（高度不一致）解的决方法

qq_31381917的博客

11-07

6950

解决移动端rem+百分比布局加载瞬间页面错乱的方法以下的内容和观点未经大牛级别验证，有错误的地方请大牛留言指教~！ 移动端布局有很多种，这里我最常使用到 rem+ 百分比的布局方式（高度/字体设置rem单位，宽度设置百分比）来处理屏幕兼容，这种方法在兼容上是比较不错的，可以使得字体以及整体适应各种大小的屏幕，可以解决ipad等比较大屏幕的适应兼容。然而发现一些问题。页面在

jquery offset positon 获取位置不准的解决方法

随记

11-11

1389

本地开发时，由于使用了图片，而且使用了offset().top涉及到图片所在的div距离计算的部分，本地开发一切都没问题；但是部署到服务器上时却出现布局错乱，经过排查发现总是少了一个图片高度的距离，原因是本地图片加载速度很快，在jquery的$(document).ready 时，图片已经渲染出来，后来的计算是在图片已经出来时计算的；但是服务器网络原因，图片总是加载很慢，在进入到$(document).ready里的计算位置时，图片还没加载完成，导致获取位置信息的API计算不正确。解决：其实只要是.

Distance Transform 距离变换

我不是校长的博客

01-08

1万+

原文地址：http://blog.sina.com.cn/s/blog_6c5a47d30102uxu3.html 最近用到了距离变换。 OPENCV 函数：void distanceTransform(InputArray src, OutputArray dst, int distanceType, int maskSize) When maskSize == CV_DIST_MAS

移动端rem布局加载瞬间的尺寸有bug 由大变小或者有小变大，怎么解决?

weixin_42137023的博客

10-21

2454

我是这样解决的 1 body 或者html 加个visibility：hidden; 或者用opacity：0； <body style="visibility: hidden;"></body> 2 使用rem 加载完成后的函数调用 body属性的visbility：visible; (function(doc, win) { var ...

使用rem单位实现布局自适应

不知不觉 | 笔记

04-05

687

css代码 * { margin: 0; padding: 0; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-appearance: none; -moz-appearance: none; app

解决移动端REM布局页面跳动的方案

qq_25354709的专栏

11-28

673

一、将REM.js 提到要加载的CSS之前原来是这样的 HTML: //-> 在页面最底部引入 <script src="../../js/user/user.js"></script> </body> JS: //-> 动态设置REM ~function () { var desW = 640, //设计稿宽度 ...

响应式布局之尺寸单位rem使用

又是再见?

10-25

1万+

web实际开发过程中,特别是移动端的页面，会遇到元素尺寸及字体在不同分辨率设备上表现差异较大，甚至严重影响用户体验；我现在的做法是使用rem作为尺寸单位，来实现页面内元素尺寸及字体在不同宽度设备下自由缩放尺寸，从而解决小屏幕上显示牛大字的尴尬情况； 1. 设置html的字体为100px; 2.页面内需要用到尺寸的地方都使用rem作为尺寸单位；（这样在改变html字体大小的时候页

手机端rem布局踩过的坑

Schrodinge的博客

05-03

1107

手机端布局一般有：rem布局、百分比布局、媒体查询、弹性盒布局等在公司接到的新需求：公司公众号需要接入提现接口，需要切一个提现页面。我脑子快速闪过用百分比布局。很快…效果就出来了，提现页面始终垂直居中，经过多方测试，本以为圆满完成任务了。很开心的就上线了，然后UI小姐姐很开心的说我要做第一个使用这个提现接口的用户，刚好我账号有钱。然而…尴尬的事情出现了，UI小姐姐的手机居然没有适配，提现框...

rem的使用及详解

m0_65491480的博客

12-31

1511

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。兼容性：目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。两种rem适配方式一、原生手写方式 1. window

移动端响应式布局设计：使用rem单位与setFontSize方法

资源摘要信息:"移动端rem布局与适配技术" 1. 移动端布局常用单位在移动Web开发中，常用的布局单位包括像素(px)、百分比(%)、em、rem等。像素是最基础的单位，但在不同设备上的显示效果会有所不同，因为设备的屏幕...