html5 百分比代替rem的方法

最新推荐文章于 2025-05-25 11:02:23 发布

「已注销」

最新推荐文章于 2025-05-25 11:02:23 发布

阅读量793

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/oMiracle123/article/details/78798988

本文探讨了在HTML5中使用百分比替代REM单位的方法，包括通过JavaScript动态控制元素高度及利用固定字体大小进行布局调整的技术。

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

html5 百分比代替rem的方法

1 写高度用js动态控制 或者用margin
2 字体大小写死

查看原文：http://newmiracle.cn/?p=2255

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

移动端适配方案之rem & 百分比

Sco_114的博客

10-24

1221

rem适配 rem是相对长度单位，可以做到一样的取值，在不同尺寸的屏幕上的大小按比例缩放。 rem的定义： rem（font size of the root element）是相对于根元素（即html元素）font-size计算值的倍数。例如html标签设置font-size:16px，同时div设置width:1.2rem。那么这个div的宽度就是1.2rem=16px*1.2=19.2px。因此这种方法的适配原理是：根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px

h5的rem代替px做移动端界面的自适应

admom的博客

05-30

1692

这两天要把公司以前的触屏设备的客户端应用做成h5的web应用，而且有针对不同设备和同一设备下的不同状态(有windows竖屏和横屏和android的平板)，总想把它做成能适配不同设备分辨率的东西，所以来研究這个问题。因为在之前的公司做过的项目中的某些模块参照过别的产品，发现过有用rem和em的，然后就来网上研究学习了解了下这几种相对单位。其中就找到了这篇文章：http://isux.tencen...

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

html 百分比 rem,利用rem和百分比实现移动端页面自适应

weixin_42602368的博客

06-18

562

本文背景：响应式布局的实现依靠媒体查询( Media Queries )来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。专题导入：我们可以通过rem单位来进行适配，然后内嵌一段js脚本去动态计算根元素大小。px：绝对单位像素rem：相对于“根元素的字体大小”的单位一、解释网页设计中经常看到的 body{ font-si...

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

qq_31381917的博客

11-07

6950

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

从像素到rem：HTML5页面布局的响应式解决方案

最新发布

weixin_33363025的博客

05-25

618

项目针对的问题主要集中在以下几个方面：跨浏览器一致性：不同浏览器和设备对px单位的支持存在差异，而rem单位则可以实现更好的一致性。响应式设计的便捷性：在响应式设计中，使用rem单位比直接使用像素能够更简单地实现元素大小的伸缩。维护成本的降低：通过自动化工具转换px到rem，可以避免手动编写和更新大量重复代码，大幅提高开发效率。该工具通过以下解决方案，为开发者提供了一个统一的转换平台：智能转换算法。

多种方法解决rem字体适配

code_change_era的博客

04-21

2050

rem单位 ·rem(root em)相对单位类似于em，em相对于是父元素的字体大小 ·rem的基准是相对于html的字体大小(root根，document的根元素是html) ·rem的优点：通过修改html的文字大小来改变页面整体元素的大小，达到适配效果实现方法一：媒体查询 ·计算方法 ...

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

weixin_33968104的博客

06-20

1925

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口媒体查询 百分比 自适应场景下的rem解决方案通过vw/vh来实现自适应一、px和视口在静态网页中，我们经常用像...

关于rem的一切,这里全都有_能“等比例”适配所有屏幕尺寸教程.zip屏幕自适应

01-14

- "HTML5用rem来做响应式开发代替px和百分比.txt"提倡在HTML5项目中使用rem，以增强页面的响应性和可维护性。 **六、工具与计算** - "px转rem工具.url"提供了在线工具，帮助开发者快速转换像素值到rem，简化计算...

HTML5、CSS、JS基础

qq_49101841的博客

03-03

2617

学习笔记

尚硅谷web前端HTML5+CSS3笔记

qq_52380174的博客

12-19

5151

HTML/CSS笔记#自用#尚硅谷#李立超

HTML5andCSS3面试题大全

donglize521521的博客

03-08

6088

文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引

rem rpx vm,hv,百分比之间的区别

weixin_45441470的博客

11-21

785

在选择使用这些单位时，需要根据具体的项目需求和使用场景来决定。这些单位提供了不同的灵活性和适应性，可以根据设计要求和目标平台选择合适的单位。、百分比都是用于处理布局和尺寸的单位，它们在使用场景和基准值上有所不同。

px、em、rem、百分比的区别

阿莹yes的博客

11-20

741

css中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm；px,em和rem用的较多，em和rem是用来适配不同屏幕的，最终也会换算成px来进行布局因此对于精确度没有限制1）网页布局中一般都是用px。2）百分比一般宽泛的讲是相对于父元素，自适应网页布局用的多。3）viewport：可视窗口，也就是浏览器。calc()使用通用的数学运算规则，但是也提供更智能的功能：使用“+”、“-”、“” 和 “/”四则运算；可以使用百分比、px、em、rem等单位；

html 百分比 rem,rem的坑，为什么要设置成百分比，为什么又是62.5%

weixin_33452735的博客

06-18

928

## rem的坑，为什么要设置成百分比，为什么又是62.5%[CSS3的REM设置字体大小_rem, 长度单位教程_w3cplus](http://www.w3cplus.com/css3/define-font-size-with-css3-rem)[使用Flexible实现手淘H5页面的终端适配_双11前端技术连载, Layout, mobile 教程_w3cplus](http://www...

rem布局百分比与rem的比例换算

鸣人的博客

05-03

4768

1rem = 3.125% 1% = 0.32rem 1px = 0.3125%

手机端页面自适应解决方案—rem布局

weixin_34194359的博客

10-13

343

2019独角兽企业重金招聘Python工程师标准>>> ...

像素，百分比，em,rem,颜色单位的相关讲解。

m0_73892800的博客

10-10

953

像素，百分比，em,rem,颜色单位的相关讲解。

使用Flexible实现手淘H5页面的终端适配二

小记心得

06-27

2110

之前，已经对此作了介绍，现优化整理出一个实用版本的flexible.js文件,可直接拷贝使用，代码如下： ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc.querySelector('meta[name="viewport"]'

px、rpx、em、rem 、vw/vh、百分比的区别？

u012174809的专栏

12-30

1603

px：绝对长度单位，来描述一个元素的宽高以及定位信息 rpx：微信小程序独有的、解决屏幕自适应的尺寸单位 em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认16px）em作为字体单位，相对于父元素字体大小；em作为行高单位时，相对于自身字体大小，整个页面内 1em 不是一个固定的值。 rem：相对单位，可理解为”root em”，相对根节点html的字体大小来计算，CSS3新加属性，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大.