前端页面屏幕自适应踩坑日记（一） rem

最新推荐文章于 2025-05-15 13:39:43 发布

原创最新推荐文章于 2025-05-15 13:39:43 发布 · 844 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#自适应 #rem

前端专栏收录该内容

2 篇文章

订阅专栏

本文讨论了使用rem作为尺寸单位时的一些关键注意事项，特别是在非文本元素的inline-block布局中，line-height的应用，以及font-size设置的重要性。

使用rem做尺寸单位时，尤其注意在非文本元素中的 inline-block，line-height,的使用，若没有设定font-size，它是以根元素的font-size为基准的，若使用一定记得加font-size

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

tinyleaf

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端页面大小自适应的问题

m0_56698268的博客

08-13

6205

解决前端页面屏幕大小自适应的问题

移动端屏幕自适应解决方案，rem单位和flex布局结合使用

yuan_618859的博客

03-12

1411

那些年我们一直搞不懂的rem是怎么用的，其实人家官方已经说得很明白了，就是那样。不过我们就是越看越不懂，呜呜移动端自适应方案页面加载时运行js，修改HTML根元素字体大小结合rem单位 flex布局 1.js代码：（以下2个版本-任意一个都行）只需要将这代码引入到页面就好。（注意：designWidth这个值自己一定要改成你自己的设计稿宽度）简约版： (function (...

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

【web前端自动化工作环境配置】1.网页屏幕自适应问题

返璞归真

03-08

1192

最近一段时间学做网页，遇到了网页屏幕适配的问题，做的网页不能随着屏幕的缩小而缩小，浏览器缩小，网页就会显示不全，为了解决这个问题，自己也琢磨了几天，也算有了结果，自己也做了如下总结： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <titl

前端浏览器，屏幕自适应技巧以及导航技巧

qq_24192465的博客

08-07

1785

1、图片：只需要设置宽度（因为图片本身已有尺寸，只需设置合适宽度，高度图片会自适应） 2、图示效果实现 html 首页产品与服务官方博客--> 关于我们联系我们 css .nav_mid li{ float: left; list-style-type: none; width: 100p

前端页面如何自适应--4种方法

热门推荐

一步一个脚印，踏实努力，向着目标前进

10-29

1万+

前端页面有很多方法可以实现。这里我将介绍五种常用的方法，并提供相应的代码示例。

页面自适应

weixin_62639453的博客

12-07

1021

由于最近在开发一款数据化可视化大屏项目，而这种项目需要适应大屏幕，或者说所有前端页面都应该做到适应不同屏幕尺寸，达到页面可适应的效果。

前端开发--css--屏幕适配--rem布局

sundanping_123的博客

07-17

458

em 是参照自身文字大小来设置尺寸 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,...

h5页面自适应配置，使用rem的配置方式

06-27

使用rem单位进行自适应配置是前端开发中的一个常用技术，它能够帮助开发者根据根元素字体大小来设置元素尺寸，从而实现不同屏幕尺寸下的页面布局适配。 rem是CSS单位中的相对长度单位，它的值相对于根元素（html...

精选资源

前端页面实现自适应

01-08

比如实际浏览器 2732 宽同样设置1rem ，那根元素要设置多少，使俩者比例一致 1366:100=2732:x 得x=200 html设置font-size=200px 而其他元素设置的rem不用变化 var deviceWidth（不考虑兼容性可使用vw,vh获取视图...

web页面自适应，rem作单位

09-23

js代码实现页面自适应，css样式可以用rem来做单位，实现界面随浏览器变化而自适应大小

前端大屏自适应踩过的坑

kgjfk的博客

09-20

807

自适应大屏项目踩过的坑

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

weixin_42137023的博客

10-21

2485

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

017、移动WEB开发之 rem 适配布局

weixin_46390041的博客

05-08

372

掌握 rem 基础知识、媒体查询制作方法、Less 的使用方法、rem 适配方案

前端rem适配(自适应布局)

Reset_Xc的博客

03-30

5064

前端rem适配

前端页面开发如何达到自适应不同设备宽高的效果

别人笑我太疯癫，我笑他人看不穿。

06-24

1415

方法一，不使用固定的元素大小值，而是使用百分比，但是除非你开发的页面所需要的渲染相当直白，否则不推荐用。比如说在一个测试页面中只写一个div，它的宽和高设置为百分比，从效果中会发现，如果不做出其他的渲染配合，这个div的高度是塌陷的，也就是说，在页面上看不到这个div。不需要管不同的地方叫什么，只需要知道，这种适应不同设备展示效果可控的技术核心，是CSS提供的媒体能力，比如你可以写多个CSS样式，并在外链时检测浏览器可视宽度，只有符合宽高要求时才会生效。想要达到这样的效果，有两种方法。

前端大屏自适应方法总结

m0_55794001的博客

09-14

2032

2.缺点：使用此方法后页面不能有地图（cesium）等js库，形状会受缩放影响，从而影响地图的交互效果。1.app.vue组件代码（用于app组件缩放会作用于整项目，也可以单独用于大屏页面）

前端针对不同屏幕尺寸自适应

weixin_60557439的博客

05-15

649

本文主要介绍了响应式布局的核心思想及实现方法。核心思想包括使用flex布局、rem、vw、vh等单位，以及通过媒体查询或检测屏幕尺寸来适配不同设备。文章详细解释了rem、vw、vh的使用方法及其区别：rem基于根元素字体大小，通过JS动态调整；vw和vh则直接根据视口宽度和高度自动缩放。此外，还介绍了百分比布局的局限性。文章还提供了相关工具（如postcss-pxtorem、postcss-px-to-viewport）的配置和使用方法，并强调了在边距处理、图片适配和数据可视化项目中的注意事项。最后，拓展了

前端页面自适应的7种办法

mao871863224的博客

04-11

9447

项目开发中经常遇见需要自适应页面的办法，下面总结几种经常用到的，欢迎补充～

前端大屏自适应方案

c327127960的博客

09-19

2055

前端大屏自适应方案

前端页面大小自适应插件

最新发布

10-17

<think>嗯，用户想找前端页面大小自适应的插件，需要结合提供的引用内容来整理方案。用户提供的引用里提到了几种不同类型的自适应方案： 1号引用是关于图片居中自适应的jQuery插件，核心是计算容器和图片比例后调整尺寸和margin； 2号引用展示了大屏场景下echarts结合等比缩放函数的方案，用窗口高度作为基准动态计算尺寸； 3号引用是经典的rem适配方案，根据屏幕宽度动态设置根字体大小； 4号引用提到字号自适应问题，指出纯CSS实现困难； 5号引用则给出了元素高度自适应的jQuery方案。从需求本质看，用户需要的是全局页面自适应方案而非局部功能。3号引用的rem适配和2号引arts的等比缩放函数是最接近需求的方案。虽然用户提到"插件"概念，但实际前端自适应往往通过配置方案而非安装独立插件实现。考虑到用户可能混淆了"插件"和"方案"的概念，我会优先推荐主流的rem和viewport方案，同时保留引用中的jQuery插件作为补充方案。特别要注意说明： - rem方案需要搭配postcss等工具自动转换px - viewport方案需要警惕移动端缩放问题 - 大屏项目必须采用vh/vw单位配合JS缩放函数对于代码示例，3号引用的rem配置可以直接复用，2号引用的getSize函数也值得展示。最后需要提醒用户区分响应式布局和自适应缩放的区别，避免期待偏差。 </think>根据您对前端页面自适应插件的需求，结合站内引用内容，以下是全面整理的自适应方案及实现方法： --- ### 一、主流自适应方案及插件实现 #### 1. **REM 等比缩放方案**（推荐通用场景）通过动态计算根字体大小实现全页面自适应，引用[3]提供核心代码： ```javascript // rem 适配配置文件 const baseSize = 16; // 基准字体大小 function setRem() { const scale = document.documentElement.clientWidth / 1280; // 基于1280px设计稿 document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; } setRem(); window.onresize = setRem; ``` **适用场景**：常规响应式网站、管理系统 **优势**： - 兼容性强（需配合 `postcss-pxtorem` 自动转换 CSS 中的 px 单位） - 代码简洁，无需依赖第三方库 --- #### 2. **Viewport 单位方案**（适合大屏可视化）引用[2]的等比缩放函数，结合 vw/vh 单位： ```javascript // 基于窗口高度等比缩放（以1080p设计稿为例） function getSize(size) { return size * (window.innerHeight / 1080); } // ECharts 配置示例 legend: { itemGap: getSize(10), itemWidth: getSize(8), itemHeight: getSize(8) } ``` **适用场景**：数据大屏、全屏展示页面 **注意事项**： - 需手动处理所有需要自适应的尺寸值 - 推荐搭配 CSS 的 `clamp()` 函数限制极值 --- #### 3. **图片自适应插件**（引用[1]实现） jQuery 插件解决图片居中+等比例缩放： ```javascript (function($) { $.fn.imgAutoSize = function() { this.each(function() { const $img = $(this).find("img"); const [ctnW, ctnH] = [$(this).width(), $(this).height()]; const [imgW, imgH] = [$img.width(), $img.height()]; if (ctnW <= imgW || ctnH <= imgH) { if (imgW/ctnW > imgH/ctnH) { $img.css({ width: ctnW, height: "auto", "margin-top": (ctnH - ctnW/imgW*imgH)/2 + "px" }); } else { $img.css({ width: "auto", height: ctnH, "margin-left": (ctnW - ctnH/imgH*imgW)/2 + "px" }); } } else { $img.css({ "margin": `${(ctnH - imgH)/2}px ${(ctnW - imgW)/2}px` }); } }); }; })(jQuery); // 使用：$(".img-container").imgAutoSize(); ``` --- ### 二、其他专项解决方案 #### 1. **元素高度自适应**（引用[5]） ```javascript $(function() { const $autoDivs = $("div[autoheight]"); $(window).resize(() => { $autoDivs.height($(window).height() - $("body").outerHeight(true)); }).trigger("resize"); }); ``` #### 2. **字号自适应插件思路**（引用[4]）关键实现逻辑： - 使用 `canvas.measureText()` 检测文本宽度 - 二分查找法逼近容器最大容纳字号 - 监听 `ResizeObserver` API 实时调整 --- ### 三、现代 CSS 替代方案（无需插件） ```css /* 容器内图片自适应+居中 */ .img-container { display: grid; place-items: center; } .img-container img { max-width: 100%; max-height: 100%; object-fit: contain; } /* 基于 clamp() 的响应式字体 */ .title { font-size: clamp(1.25rem, 5vw, 2.5rem); } ``` --- ### 选择建议 | 场景 | 推荐方案 | 优势 | |---------------------|-----------------------|-------------------------| | 常规响应式网站 | REM 缩放方案 | 开发效率高，兼容性好 | | 数据可视化大屏 | Viewport 缩放 + JS 函数 | 精准控制图表元素 | | 图片/相册展示 | 图片自适应插件 | 完美解决居中+等比缩放 | | 现代浏览器项目 | CSS 原生方案 | 零依赖，性能最佳 | > **重要提示**：移动端优先项目建议优先使用 CSS 媒体查询（`@media`）配合 flex/grid 布局，插件方案更适合复杂桌面端场景[^1][^3]。 --- ### 相关问题 1. REM 方案在移动端浏览器有哪些兼容性问题？ 2. 如何解决 iframe 嵌套页面的自适应问题？ 3. 使用 Viewport 单位时如何避免内容溢出容器？ 4. CSS 容器查询（Container Queries）能否替代传统自适应方案？ 5. 在 Vue/React 中如何优雅地实现全局自适应？ > 引用说明：插件实现代码来源于站内技术文档[^1][^3][^5]，现代 CSS 方案参考 MDN 标准规范。

前端页面 屏幕自适应 踩坑日记（一） rem

前端页面屏幕自适应踩坑日记（一） rem