如何使用rem

最新推荐文章于 2022-07-28 20:29:42 发布

前端小生一枚

最新推荐文章于 2022-07-28 20:29:42 发布

阅读量330

点赞数

CC 4.0 BY-SA版权

分类专栏：基础知识复习巩固文章标签： rem

本文链接：https://blog.youkuaiyun.com/qq_33699819/article/details/88980353

基础知识复习巩固专栏收录该内容

40 篇文章

订阅专栏

确定基数：一般10px，自己记住就行，不用写进代码里
html {font-size:百分数;} 百分数=基数/16 (10/16 = 62.5%)
px换算rem 公式=想要的px值/基数

例如：当你设置 html {font-size:62.5%;}，你想给容器里的文字设置字号16px，换算成rem就是16px/10=1.6rem

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小生一枚

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Rem 自适应原理与应用

chenyajundd的博客

02-26

2967

实现 rem 单位自适应，需要借助 postcss-pxtorem 这款插件将 px 转换为 rem，需要检测窗口的变化去设置根元素的字体大小，从而实现 rem 自动计算，实现自适应。

rem使用

Jinmy的博客

09-05

1540

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。首先，先说一个常识，浏览器的默认字体大小都是1...

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

【rem】什么是rem，如何使用rem

m0_46681882的博客

07-28

3390

rem基础

前端的rem的用法

weixin_55804002的博客

11-03

4873

1.概念首先来说说rem的概念，rem就是根元素的字体大小单位。 2.简单讲讲rem的概念 <html> <head> <meta charset="utf-8"> <style type="text/css"> html { font-size: 30px; } .div1 { font-size: 1rem; } .div2{ font-.

rem的用法总结

那一日面朝大海的博客

11-28

4671

rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。兼容性：目前，IE9+，Firefox、Chrom...

vue中使用rem布局代码详解

12-13

在Vue.js项目中，使用rem布局是实现响应式设计的一种常见方法，特别是在移动端开发中。rem（root em）单位基于HTML元素的字体大小，通过调整这个基础值，我们可以轻松地改变整个页面的尺寸，以适应不同设备的屏幕...

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

最新发布

06-27

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

详解vue-cli中使用rem,vue自适应

11-27

Vue CLI项目中使用`rem`和实现自适应布局可以帮助开发者创建响应式的用户体验。下面将详细解释`rem`的工作原理以及在Vue CLI项目中如何配置和使用。 ### 1. `rem`单位介绍 `rem`（root em）是CSS中的长度单位，...

iosSelect使用rem单位适配示例

12-14

该示例中使用rem为单位，且1rem = 100px，如果需要改变1rem等于多少px，需要将css中的值和调用iosSelect.js时的itemHeight 和 headerHeight的值转换成rem

rem的使用方法

JHY97的博客

01-24

4298

一、概念 rem指对于根元素的字体大小单位，例如根字体font-size为10px，则1rem大小即等于10px 二、案例使用媒体查询+rem或者js，在不同宽度的视口下自动调整字体大小 <body> <div>rem字体大小</div> </body> <script> var c=()=>{ // 获取设备的宽度 let w = documen

移动端rem怎么用?

Bright2017的博客

12-08

6108

移动端rem怎么用?

rem使用方法

wengou3033的博客

03-26

1778

https://blog.csdn.net/qq20004604/article/details/67071008

如何优雅的使用rem

箫七

07-12

933

移动端CSS做布局的时候，如何选择px、em、%、rem这几个单位呢？很多初做移动端的童鞋们，不知道如何用px、em、%还是用rem做移动端的布局，那就举例说一下：如果使用%作为单位的话，在iphone4上多少会有些布局错位，那用rem就解决了这个难题。document.documentElement.style.fontSize=document.documentElement.clientWid

rem 的用法及详解

m0_37866091的博客

12-08

1万+

rem的使用方法：首先，先说一个常识，浏览器的默认字体高都是16px。步入正题-----〉兼容性：目前，IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持了rem。就算对不支持的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。使用%单位方便使用 css中的body中先全局声明font-size=62.5%，这里的%的算法和rem一样。因为100%=16px，1px=6.25%，所以10px=62.5%，这是的

前端设置使用rem

想好了再写！

12-03

466

JavaScript 中 rem 的实现和计算

guoqkmiss的博客

05-12

5654

rem 1、定义 rem（font size of the root element）是指相对于根元素的字体大小的单位。 1rem 等于根元素 htm 的 font-size，即只需要设置根元素的 font-size，其它元素使用 rem 单位时，设置成相应的百分比即可。 2、如何实现 rem(倍数） = width / （html的font-size）=> width = (html的font-size) * rem(倍数) 只要 html 的 font-size 的大小变了，width 就

rem详解极其用法

yangchu199608的博客

01-12

6848

1.什么是rem?rem（font size of the root element）是指相对于根元素的字体大小的单位。 2.为什么要用rem(rem有什么优点)？都知道现在手机屏幕分辨率越来越多了，假设我们的网页需要适配的iPhone4（320px），iPhone6(375px)，iPhone6 Plus(414px)。我们的需求是，当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的文字、

rem原理及使用

热门推荐

A_seeker的博客

05-12

2万+

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使用配置

小分享

11-07

966

rem的使用会转化为一个如何让根元素的font-size动态变化问题? /*dpi*/ /* for 1080+ px width screen */ /* for 1080 px width screen */ /* for 800 px width screen */ /* for 800 px width screen */ @media only screen and (min-wid...

nextjs使用rem

03-26

<think>好的，我现在需要帮助用户了解如何在Next.js中使用REM单位。首先，我得回忆一下REM的基本概念，它是相对于根元素（通常是html标签）的字体大小的相对单位。所以在Next.js项目中使用REM，主要是为了响应式设计和可访问性，让页面元素能够根据根字体大小进行缩放。接下来，我得考虑如何在Next.js中设置根字体大小。通常，可以通过全局CSS样式来设置html的font-size。用户可能需要在styles目录下创建一个全局CSS文件，比如globals.css，然后在里面定义html的字体大小。比如设置为62.5%，这样1REM就等于10px（因为浏览器默认是16px，62.5%就是10px），这样计算起来更方便。然后，用户可能需要在组件中使用REM单位。比如在CSS模块中，设置某个元素的宽度为20rem，相当于200px。这时候需要确保组件中正确引入CSS模块，并且样式应用正确。另外，响应式设计也是一个需要考虑的点。用户可能希望根据不同的屏幕尺寸调整根字体大小，这时候可以使用媒体查询。比如在移动端设置更小的根字体大小，然后在桌面端调整。不过，使用媒体查询可能需要不同的策略，或者结合JavaScript来动态调整，比如在useEffect钩子中监听窗口大小变化，并修改根字体大小。不过这样做可能会影响性能，需要注意。还有，用户可能会遇到第三方库或组件使用px单位的情况，这时候需要考虑如何统一处理。可能需要使用postcss插件，比如postcss-pxtorem，将px自动转换为REM。这需要在PostCSS配置文件中进行设置，并安装相应的插件。同时，在next.config.js中配置PostCSS，确保构建过程中自动转换。还有可能需要注意图片和图标的大小，这些也可能需要使用REM单位来保持整体布局的一致性。如果使用SVG，可能需要设置其width和height为REM，或者通过CSS控制。测试也是重要的一环，用户可能需要验证不同屏幕下REM是否按预期工作，检查元素的实际像素值是否符合计算后的结果。可以使用浏览器的开发者工具来检查计算样式，确认REM单位是否正确转换。最后，可能需要提醒用户注意一些常见问题，比如在JavaScript中直接操作样式时，可能需要手动将REM转换为像素值进行计算，或者动态调整根字体大小时如何避免布局抖动。另外，使用REM时，嵌套元素的字体大小可能不会受到影响，因为它们相对于根元素，但其他单位如em可能会影响，需要注意区分。总结下来，步骤大致是：设置根字体大小，配置PostCSS转换，应用REM单位到样式，处理响应式调整，测试验证，以及注意事项。这样用户应该能够在Next.js项目中顺利使用REM单位了。</think>在Next.js中使用REM单位进行开发，可以通过以下步骤实现响应式布局：一、基础设置 1. 创建全局CSS文件（如`globals.css`）： ```css /* 设置根字体大小（1rem = 10px） */ html { font-size: 62.5%; /* 基于浏览器默认16px的62.5% */ } /* 定义响应式断点 */ @media (max-width: 768px) { html { font-size: 50%; /* 移动端1rem=8px */ } } ``` 二、组件使用示例 ```css /* Button.module.css */ .container { padding: 2rem; /* 20px（桌面端）或16px（移动端） */ font-size: 1.6rem; /* 16px（桌面端）或12.8px（移动端） */ } ``` 三、自动转换方案（推荐） 1. 安装postcss插件： ```bash npm install postcss-pxtorem --save-dev ``` 2. 创建`postcss.config.js`： ```javascript module.exports = { plugins: { 'postcss-pxtorem': { rootValue: 10, // 对应html字体62.5%的设置 propList: ['*'], selectorBlackList: [/^html$/] // 排除html标签 } } } ``` 四、动态调整方案 ```javascript // 在_app.js中添加响应逻辑 import { useEffect } from 'react' function setRootFontSize() { const width = window.innerWidth const baseSize = width > 768 ? 10 : 8 document.documentElement.style.fontSize = `${baseSize}px` } function MyApp({ Component, pageProps }) { useEffect(() => { setRootFontSize() window.addEventListener('resize', setRootFontSize) return () => window.removeEventListener('resize', setRootFontSize) }, []) return <Component {...pageProps} /> } ``` 五、注意事项 1. 图片处理建议： ```css .img-responsive { width: 24rem; /* 240px */ height: auto; } ``` 2. 第三方组件适配： ```css /* 强制转换第三方组件 */ .third-party-component { font-size: 1.6rem !important; padding: 1rem !important; } ``` 3. 计算公式： $$ 1rem = \frac{rootFontSize}{16} \times 100\% $$ 验证方法： 1. 浏览器开发者工具检查元素 2. 控制台执行： ```javascript // 验证当前根字体大小 getComputedStyle(document.documentElement).fontSize ``` 最佳实践： - 优先使用`rem`进行布局尺寸定义 - 使用`em`进行文本相关定义 - 保留`px`用于边框等小尺寸 - 推荐搭配CSS变量使用： ```css :root { --spacing-unit: 2rem; --max-width: 120rem; } ```