rem 工作原理 及 使用介绍

最新推荐文章于 2024-04-05 17:38:08 发布
最新推荐文章于 2024-04-05 17:38:08 发布
阅读量1.2w 收藏 52
点赞数 11
文章标签： rem rem介绍 rem原理 rem使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zanyanwen/article/details/85340623
版权

1、什么是rem？

rem是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们
前端常说的适配单位rem。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem。

例如以下代码，渲染效果为： div的宽度为2rem=32px,高度为1rem=16px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        html{
            font-size: 16px;
        }
        .box{
            width: 2rem;
            height: 1rem;
            border: 1px solid #f00;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

 

2、rem的移动适配原理

举个列子：

设计稿宽度：600px

移动设备：600px

设置html的 font-size= 移动设备 / 设计稿宽度 * 100  = 100px，那么 1rem = 100px

设置一个盒子的宽度: width=1rem（即100px），此时这个盒子屏占比为：1/6。

当相同的代码运行在屏幕为300px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度  * 100  = 50px，渲染出来的盒子就是1rem = 50px,这个盒子屏占比同样为：1/6。以此达到移动适配的效果

可以看出适配的的关键就在于js设置html的font-size:  font-size= 移动设备 / 设计稿宽度  * 100。那么这个公式怎么来的呢？

首先    移动设备 / 设计稿宽度    是渲染效果相对于设计稿的缩放比

然后    移动设备 / 设计稿宽度 * 100   乘以100是为了把font-size(=rem)放大100倍，因为当font-size小于浏览器支持最小字体大小的时候，浏览器会把fon-size默认为最小字体大小。也可以乘以其他值如50，但是为了好计算，一般设置为10或100，这样，我们只需要把设计稿宽度如 width=50px，除以10或100，改为5rem或0.5rem就好了。

 

3、如何设置html的font-size大小

例如：设计稿为720px；当设备大于720px时，渲染比例1:1，当小于720px时，按照相应的比例缩小

var cw = document.documentElement.clientWidth; 
if (cw > 720) { 
    cw = 720; 
} 
document.getElementsByTagName("html")[0].style.fontSize = 100 * ( cw / 720) + 'px'

 

有理解不清晰的地方，欢迎留言讨论。。。

颜文
关注
  • 11
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
rem布局原理解析
12-14
移动端的屏幕大小各异,尤其是安卓机,千奇百怪,各种尺寸的机型都有,而且有1倍屏,2倍屏，3倍屏之分，作为精益求精的前端，我们希望找到一种完美适配各种机型的方案。rem是现在主流的移动端自适应布局方案，本文主要介绍了rem布局的原理和通用方案 原理 首先说一下，我们想要达到的自适应效果是什么。很简单：元素、字体大小能随着屏幕大小（一般相对于宽度来说）变化而变化，在大一点的屏幕上，尺寸大一些；在小一点的屏幕上，尺寸小一些；尺寸的大小和屏幕大小成正比。 最简单最直接的方案就是直接用百分比设置元素的尺寸。我们用百分比设置元素大小可以实现元素尺寸的自适应，但是无法实现字体大小的自适应，而且尺寸转化为百
前端响应式布局基础——rem
weixin_34279246的博客
05-18 235
免责说明 本文内容浅薄，不喜勿喷 什么是rem? rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。 不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。 响应式布局的准则 响应式布局的要求（摘自知乎 Z Yuhan）： 1 . 内容区块可伸缩：内容区块的在一定程度上能够自动调整，以确保填满整个页面 ...
移动WEB开发之rem适配布局
最新发布
surx123456的博客
04-05 626
Less是一门css预处理语言，他扩展了css的动态特性。
rem原理
weixin_68950988的博客
08-12 448
rem原理
rem的原理
ChinaW_804的博客
12-07 4169
什么是rem？ rem是响应式布局的一种，是相对于根元素(即html元素)font-size计算值的倍数的一个css单位。因为rem的特性相对长度单位，常被用来做移动适配，pc端页面不推荐使用rem rem布局的本质是等比缩放，一般是基于宽度针对设计稿的宽度 利用js动态获取屏幕的宽度 rem是相对于根元素的字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px 如何根据设计图设计rem比例 rem中的核心公式 7.5是设计图的宽度除以100p
rem实现原理
wozouludaifeng的博客
11-04 174
rem实现原理 // 原始配置 function setRem () { let doc = document.documentElement let width = doc.getBoundingClientRect().width let rem = width / 75 doc.style.fontSize = rem + 'px' } // 监听窗口变化 addEventListener("resize", setRem)
rem的实现原理
weixin_37739550的博客
08-20 2886
em和rem在逻辑上的差别仅仅是参照对象不同，em是参照父元素的字体大小，rem是参照根目录HTML的字体大小。 rem布局实际上就是实现等比缩放 试想，如果我们的元素在不同的屏幕上可以按照相同的比例来进行缩放就好了。 rem的计算原理： 试想把屏幕平均分成10份，那么每一份就是1/10，我们选择每一份的大小是1rem，那么一个5*(1/10)的大小就占屏幕大小的50%，这就是rem 我们设计稿的宽度是750px，那么对于设计稿上宽度为600px的一个元素，它的rem值是怎么计算呢？ 上面我们把屏幕分成了
ASP.Net 工作原理
03-30
主要介绍Asp.net的工作原理，以及IIS5.0和6.0的区别. ASP.NET ISAPI 扩展 (aspnet_isapi.dll) 在 IIS 进程地址空间 (inetinfo.exe) 中运行，并通过命名管道将 ASP.NET 文件类型请求转发给 ASP.NET 辅助进程。 可以...
styled-study:创建类似于样式化组件工作原理的组件的简单项目。 旨在更多地了解如何使用模板文字和标记的模板文字
05-27
我尝试使用此ES6功能模拟样式化组件的工作方式。 对于该/ styled / index，导出到目前为止仅处理div和p标签的样式化对象。 它的使用与使用样式化组件中的样式进行样式化的方式相同，但是它仅处理简单的css属性。用...
程序员面试刷题的书哪个好-work:工作
07-07
在面试和工作中遇到的问题，系统总结一下，温故而知新。学习虽然缓慢，但是一定会有收获。 前端技能 / CSS 移动端h5适配 适配的原理是有个基准，在视口大小改变的时候重新计算。 首先需要了解几个单位px，rm，rem，...
front-njxs-screen:宁家鲜生大屏展示（pc，移动端），通过响应式来适配移动端，适配方式采用rem（移动端），pc端采用对应比率的方式（pc端1920*1080），项目启动基于vue，内容基于echarts
05-10
静止的 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification ... 有关工作原理的详细说明，请查看的和。
HTML最新2023年面试题，高级面试题及附答案解析.txt
02-25
### 19、HTML5的文件离线储存怎么使用，工作原理是什么 ### 20、link 标签定义 ### 21、px，em，rem的区别？ ### 22、在新窗口打开链接的方法是？ ### 23、怎么重构页面？ ### 24、网页验证码是干嘛的，是为了解决...
rem原理及使用
热门推荐
A_seeker的博客
05-12 1万+
rem原理及使用 rem的定义： rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。 如：一个页面html中设置了font-size的值，使用rem即为这个已设置值的倍数。 eg: html设置font-size: 20px; 可知1rem=20px,使用时即可计算转化为rem的倍数。 html{ font-size: 20px; } <div style="font-size:
rem 原理与简介
aijiaju0221的博客
04-21 433
一、rem原理与简介 字体单位： 值根据html根元素大小而定，同样可以作为宽度，高度等单位 适配原理： 将px替换为rem，动态修改HTML根元素的font-size适配 兼容性： Ios 6以上和 Android 2.1以上，基本覆盖所有流行的手机系统 // 移动 web 独有的 viewport 标签 //...
rem原理 - 2
吃瓜群众的博客
05-28 238
github地址 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=...
Rem布局原理
大G的博客
11-04 575
Rem布局原理rem布局的本质是什么？这是我问过很多人的一个问题，但得到的回答都差强人意。其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，那该多么美好啊假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比p {width: 50x} /* 屏幕宽度的50% */如果想要页面元素随着
rem 布局原理
江咏之
07-05 844
rem：相对于根元素(即 html 元素)font-size 计算值的倍数。 通俗的说，1rem = html 的 font-size 值 这段代码。a 标签的 font-size 值为 0.5rem，实际就是 100px*0.5=50px。 html{font-size:100px;} a{font-size:.5rem;} 如何使用 rem 进行布局？ 1.标签的 rem 单位的值怎么计算 通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面.
Rem布局的原理解析
jgujgu的博客
05-09 789
需要了解的知识 html{font-size:16px} p{font-size:1rem} 1rem = 16px; rem 和 em 类似，em相较于父元素的字体大小，而rem相较于html的字体大小； 实现原理 有了这个以上的前提可以通过监测屏幕大小改变html的字体大小，从而实现自适应大小的效果； 获取设备宽度与设计稿宽度的比例 作为html font-size的大小； 假如是750/750 那么font-size：1px;设计稿上200px,代码就要写200rem;这样写太大. 通常750/75
webpack 使用 rem
09-29
Webpack使用rem作为单位可以通过配置webpack.config.js文件来实现。在module.rules数组中添加一个rule对象，test属性使用正则表达式匹配.less文件，然后在use属性中添加相应的loader。其中，postcss-loader用于自动添加浏览器前缀，px2rem-loader用于将px单位自动转换为rem单位。具体配置如下所示： ```javascript module: { rules: [ { test: /\.less$/, use: [ 'css-loader', 'less-loader', { loader: "postcss-loader", options: { postcssOptions: { plugins: [ autoprefixer({ overrideBrowserslist: [ 'last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8' ] }) ] } } }, { loader: 'px2rem-loader', options: { remUnit: 75, remPrecision: 8 } } ] } ] }, ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值