- 综合排序
- 最热优先
- 最新优先
- 来自专栏call_me_R
CSS REM - 什么是 REM？
本文，我们将探讨 CSS 中使用 REM（Root EM）。 CSS 中 REM 是什么？ REM 代表 font size of the Root element，即 Root EM。 我们为什么需要考虑使用 REM 单位呢？ 我们为什么要使用 REM？ 在 CSS 中，有两种 CSS 长度值：绝对长度值和相对长度值。 相对长度有 REM，EM，vw 和 vh 等。 REM 和 Root Font Size REM 的定义和根元素的字体大小有关。该根元素可以是 :root 伪类选择器或者 html 标签选择器。 参考 CSS REM – What is REM in CSS?
1.4K10编辑于 2023-05-23 - 来自专栏call_me_R
可爱的rem
来进行适配啊：可以说是目前最强的移动端适配方案... rem是什么 rem和em单位一样，都是一个相对单位，不同的是em是相对于父元素的font-size进行计算，rem是相对于根元素html的font-size 进行计算的，这样一来rem就完美的绕开了复杂的层级关系，实现了类似em单位的功能。 默认情况下，浏览器给的字体大小是16px，按照转化关系16px = 1rem。 咦，都是固定了根元素是默认16px了，如何设备不同的移动设备呢？ 见下： rem自适应处理方案 使用rem布局的时候，为了兼容不同的分辨率，我们应该要动态的修正根字体的大小，让所有的用rem单位的子元素跟着一起缩放，从而达到自适应的效果。 (function(){ var devicePixelRatio = window.devicePixelRatio || 1; })(); 复制代码 嗯，在移动端上面适配，rem和viewport
1.2K20发布于 2019-07-31 - 来自专栏网络日志
rem响应式布局-自动将px转换为rem--px2rem插件的使用
当你在项目中采用rem做响应式页面的时候，如果代码里面写的是rem单位的话，会不好判断各种距离、宽高的具体数值，下面介绍一款插件：px2rem，使用此插件可以在代码里依然写px，启动项目会自动将 px单位转换为可响应的rem单位 第一步 installcnpm install postcss-px2rem px2rem-loader --save 第二步 在项目src目录下新建util文件夹（如已有请忽略 ），在util文件夹下新建rem.js文件，内容如下： // rem等比适配配置文件 // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem /util/rem' 第四步 在项目根目录新建vue.config.js文件（如已有请忽略），并在其中添加如下代码 // 引入等比适配插件 const px2rem = require('postcss-px2rem ') // 配置基本大小 const postcss = px2rem({ // 基准大小 baseSize，需要和rem.js中相同 remUnit: 16 }) // 使用等比适配插件
2.3K10编辑于 2024-06-22 - 来自专栏半杯茶的小酒杯
Mobileye REM地图
REM的处理流程如下，首先从成百上千辆车获取检测信息(没有使用差分GPS，而是使用了普通的GPS)，这些数据传送到云端；每辆车Detection的角度不同，由于遮挡等原因，每辆车检测的landmark也有差异
1.9K21编辑于 2022-04-28 - 来自专栏技术社区
rem 布局原理
rem：相对于根元素(即 html 元素)font-size 计算值的倍数。 通俗的说，1rem = html 的 font-size 值 这段代码。 html{font-size:100px;} a{font-size:.5rem;} 如何使用 rem 进行布局？ 1.标签的 rem 单位的值怎么计算 通过使用 rem + js 改变 html 标签的 font-size（整体缩放）实现兼容性更高的页面下面来举个例子， 当我们拿到的设计图是 750px 的时候， 窗口宽度 750px，html 的 font-size 的大小为 100px； 也就是说 1rem = 100px；所以标题的 font-size 的大小为 26/100=0.26rem； 2.如何实现兼容各种屏幕大小的设备 (); window.onresize = rem; </script>
1.7K30编辑于 2022-06-16 - 来自专栏进击的君君的前端之路
px、em、rem
em的父元素没有设置font-size，那么它会去找他父元素的父元素，一级级的往上找，知道找到位置 当没有设置font-size时，浏览器会有一个默认的em设置，一般设置为：1em = 16px 3、rem rem也是相对的长度单位，参照对象为根元素html，参照物固定不变，所以比较好计算。 当没有设置font-size时，浏览器会有一个默认的rem设置，一般设置为：1rem = 16px 若根元素html字体大小设置为：font-size:62.5% ，则 1rem = 10px (10 /16*100%) 若根元素html字体大小设置为：font-size:100% ，则1rem = 16px
1.6K20发布于 2018-06-27 - 来自专栏Triciaの小世界
移动适配-rem
rem 认识 优点： 可以适应不同大小的屏幕 使用px或者百分比布局不能实现： px单位时绝对单位 百分比布局是宽度自适应，高度固定的 rem使用 rem使用时需要配合: 媒体查询 flexible.js (推荐使用⭐) rem 单位 相对单位 相对于HTML标签的字号计算结果 1 rem = 1 HTML字号大小 媒体查询 作用 能够检测视口宽度，根据不同的视口宽度设置不同的html字号大小 HTML html { font-size: 37.5px; } } .box { width: 2rem 单位尺寸 确定设计稿对应的HTML标签字号 查看设计稿宽度 确定参考设备宽度（视口宽度）一般参考375px 确定基准根字号（1/10视口宽度） rem单位 = px数值/基准根字号值 ，取小数点后 ; height: 0.7733rem; background-color: green; } </style> </head>
1.8K10编辑于 2023-04-12 - 来自专栏h5学习笔记
rem适配布局
1、rem基础 rem单位 rem (root em)是一个相对单位 ,类似于em , em是父元素字体大小。 不同的是rem的基准是相对于html元素的字体大小。 实现元素动态大小变化 rem单位是跟着html来走的，有了rem页面元素可以设置不同大小尺寸， 媒体查询可以根据不同设备宽度来修改样式 媒体查询+ rem就可以实现不同设备宽度,实现页面元素大小的动态变化 为单位的值; 4.2 rem适配方案技术使用(市场主流) 技术方案1 rem 媒体查询 less 技术方案2 (推荐) flexible.js rem rem实际开发适配方案 是2rem * 2 rem比例是1比1 ⑧320屏幕下 ，html 字体大小为21.33，则2rem = 42.66px，此时宽和高都是42.66，但是宽和高的比例还是1比1 ⑨但是已经能实现不同屏幕下页面元素盒子等比例缩放的效果 rem值 = 页面元素值( px) / html font-size字体大小 rem适配方案2 简洁高效的rem适配方案flexible.js 手机淘宝团队出的简洁高效移动端适配库 我们再也不需要在写不同屏幕的媒体查询
2.3K30发布于 2020-09-30 - 来自专栏全栈程序员必看
》》初识移动端–rem
height: 0.6rem; margin-right: 0.06rem; font-size: 0.48rem; : 0.1rem; box-shadow: 0 0.05rem rgba(255, 220, 78, 0.5); } width: 7.5rem; height: 0.85rem; margin: 0 auto; width: 6.7rem; margin: 0 auto; margin-top: 0.4rem; font-size 0.18rem; font-size: 0.36rem; color: #df3938; text-decoration
1.3K30编辑于 2022-09-15 - 来自专栏clz
rem适配布局
rem 适配布局 rem 单位 rem 是根 em(root em)的缩写，是相对于根元素(html 元素)的字体大小。 rem 作用于非根元素字体大小时，相对于根元素字体大小；rem 作用于根元素字体大小时，相对于其初始字体的大小。 : (30 + 82 / 50rem) // 或 height: 30 + (82 / 50rem); font-size: 82 + 15px + 3rem; } 生成的CSS ; height: 82 / 50rem; font-size: 100px; } rem 适配方案 目标 让一些不能等比自适应的元素，当设备尺寸发生改变时,等比例适配当前设备。 1： less 媒体查询 rem 插件 easy less rem 适配方案 2： flexible.js rem 插件 cssrem 参考： pink 老师前端入门教程
1.9K30编辑于 2023-01-02 - 来自专栏404
rem与em详解
rem与em详解 em 和 rem都是灵活、 可扩展的单位，由浏览器转换为像素值，具体取决于您的设计中的字体大小设置。 Em 和 rem 单位提供的这种灵活性和工作方式都很相似，所以最大的问题是，我们何时应使用 em 值，何时应使用 rem 值呢? rem 单位如何转换为像素值 当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。 为什么使用 rem 单位: Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 媒体查询中使用 rem 单位 不要在多列布局中使用 em 或 rem -改用 %。 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
5.3K30编辑于 2022-04-25 - 来自专栏Rattenking
前端自适应----单位rem
此处1rem代表的是width / 7.5 + ‘px’的结果，也就是750的100px，当我们在实际操作的时候，直接用(实际的值/100)，就是我们需要的rem值。 （比如某个字体在750psd是40px，那么你设置的时候font-size就是0.4rem。） DEMO 手机网易网
97610发布于 2021-01-29 - 来自专栏WebJ2EE
【CSS】：响应式设计——REM
详解 REM 4.1. 什么是 REM？ Represents the font-size of the root element (typically <html>). ; border: .5rem solid blue; padding: .5rem; margin: 2rem; } </style> </head> <body REM 布局的本质？ REM 布局的本质是等比缩放，一般是基于宽度。 4.3. 辅助工具？ 浏览器缩放时，按比例调整 html 元素的 font-size： https://github.com/amfe/lib-flexible px 转 rem（不想手动一个一个把 px 转成 rem）： { width: 3rem; padding: 0.64rem 0.16rem 0.16rem 0.16rem; margin: auto;
2.4K20发布于 2020-11-05 - 当我们设置HTML字体大小为20px的时候，相当于1rem=20px，此时div的宽高就是100px，字体大小就是20px,当我们改变HTML字体大小的时候 可以自己写一下这样的代码，很容易就知道rem是怎么换算的。 根据这个特性，我们就可以动态的设置HTML的字体大小，来自适应不同手机分辨率，当然，最好我们设置成能整十整百的计算，好比1rem=100px，而不是1rem=75px，这样方便写样式的时候计算。 PC端最好不要使用rem，因为像Chrome最小字体单位是12px，可是默认大小是16px，不同浏览器会有不同的默认单位或者是最小字体单位，所以PC最好不要使用rem单位。来自专栏coding个人笔记
CSS单位em和rem
一般开发用px比较多，现在开发移动端rem用的也比较多，在这边就不讨论vh和vw与rem的比较。今天只说说em和rem具体的显示单位。 : 1rem">这是em单位
1.3K20发布于 2020-04-23
响应式布局rem布局
我们做的h5页面只能在移动端访问（rem不兼容低级版本浏览器） 第一步：从UI设计师拿到设计稿（psd） 640*1136 第二部：在样式中给HTML一个fontSize值，我们一般都给一个比较好算的值 在这里我们之所有用100px,主要是浏览器最小的字体大小都是12px,用10px比例会存在偏差 html{ font-size: 100px;/*1rem=100px*/ 写样式 完全按照设计尺寸来写样式，不管任何事情，设计稿给你的宽度，高度字体大小、margin、padding的值是多少，我们就写多少 但是我们在写样式的时候，需要把得到的像素值除以100，计算出对应的rem 值，我们设定的也都是rem的值 （值得注意点的是外层盒子的宽度我们一般还是不写固定值，沿用流式布局的思想） 第四步：根据当前屏幕的宽度和设计稿的宽度来计算我们的HTML的fontSize的值 设计稿 fontSize=50 手机：375 fontSize=58.59375 // 根据当前屏幕的宽度和设计稿宽度的比例，动态计算一下宽度下fontSize值应该是多少，如果fontSize值改变了，之前的rem
理解rem实现响应式布局原理及js动态计算rem「建议收藏」
前言 移动端布局中，童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。 1、什么是rem rem是相对于根元素（html标签）的字体大小的单位。 2、rem实现适配的原理 核心思想：百分比布局可实现响应式布局，而rem相当于百分比布局。 实现手段：动态获取当前视口宽度width，除以一个固定的数n，得到rem的值。表达式为rem = width / n。 通过此方法，rem大小始终为width的n等分。 3、如何动态计算rem 核心代码块： // 动态为根元素设置字体大小 function init () { // 获取屏幕宽度 另外说明一点，此方法实现的功能也相对简单，只实现了最核心的动态修改rem的值。
html --- rem 媒体查询
rem是一种相对长度单位，参考的基准是<html>标签定义的font-size。 屏幕宽度1440px：font-size: 64/1440*1440 = 64px 在<html>标签上只做一次媒体查询，而在p.intro上使用rem单位。 16.67px; } } @media (min-width: 1440px) { html { font-size: 64px; } } // CSS单位使用rem p.intro { font-size: 1rem; } ?
字体rem通用基本设置
setRem () { let doc = document.documentElement let width = doc.getBoundingClientRect().width let rem = width / 75 doc.style.fontSize = rem + 'px' } // 监听窗口变化 addEventListener("resize", setRem)
rem和em小插曲
今天突然发现对rem和em的理解有很多的错误 1.对em来说，它的大小是相对于父层font-size来改变，但是如果其自身有font-size属性的话，em会优先考虑自身的font-size; 2 rem DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rem和em</title> <style type="text/ width:200px; height: 200px; border: 1px solid red; font-size: 20px; } .div2{ font-size: 15px; height: 3<em>rem</em> div2的font-size为15px，其宽度为3rm，即为15*3+2=47 当去除自身的font-size，则继承父类的font-siz，即为20*3+3=62； <em>rem</em>是严格按照html的font-size
Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
-- built files will be auto injected --> </body> </html> 二、CSS样式适配 1、安装px2rem-loader包（只适用于css样式） npm i px2rem-loader -D 更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/119116648
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号