rem使用示例

最新推荐文章于 2022-01-24 22:52:49 发布
最新推荐文章于 2022-01-24 22:52:49 发布
阅读量715 收藏
点赞数
分类专栏： 前端学习园地
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/howard2005/article/details/79358104
版权
rem使用示例

em是相对于上一层父容器来进行计算，但是rem永远都是相对于顶层容器来计算计算。

1、代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rem演示</title>
    <style type="text/css">
        p {
            font-size: 3rem;
        }

        div {
            font-size: 2rem;
        }

    </style>
</head>
<body>
<p>I love you. ~3rem</p>

<div>
    I love you. ~2rem
    <p>I love you. ~3rem</p>
</div>
</body>
</html>
2、效果

3、说明

p {
font-size : 3 rem ;
}

表明p元素字号是body元素基本字号的3倍，无论p元素是body的子元素，还是body子元素div的子元素，p元素的字号都是一致的。

如上所示，放在body里的p元素与放在div里的p元素，字号是一样的。
howard2005
关注
专栏目录
rem详细使用案例
10-23
这是一个前端开发项目的移动案例，一看就懂，最基本的
rem案例展示
02-11
rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。
rem实例
徐同保的专栏
11-29 594
rem实例
使用rem实例
Bling_Bling_的博客
11-20 2095
rem phone test html { height: 100%; width: 100%; font-family: 'Heiti SC', 'Microsoft YaHei'; font-size: 20px; overflow: hi
rem使用
Jinmy的博客
09-05 1487
rem是什么？ rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 首先，先说一个常识，浏览器的默认字体大小都是1...
iosSelect使用rem单位适配示例
12-14
该示例中使用rem为单位，且1rem = 100px，如果需要改变1rem等于多少px，需要将css中的值和调用iosSelect.js时的itemHeight 和 headerHeight的值转换成rem
vue3.0中使用postcss-pxtorem的具体方法
10-15
在Vue 3.0框架中，使用`postcss-pxtorem`是一个有效的方法，可以帮助开发者将CSS中的像素单位（px）转换为相对单位（rem），从而实现响应式布局，特别是在移动端设备上。`postcss-pxtorem`是一个PostCSS插件，它的...
vue中rem的配置的方法示例
10-18
在Vue.js中，为了实现移动端的自适应布局，通常会使用`rem`单位结合媒体查询进行设计。`rem`（root em）单位是以根元素（html元素）的字体大小为基准的长度单位，通过动态调整html元素的字体大小，我们可以轻松地...
vue中的适配px2rem示例代码
10-17
其中，使用 `px2rem` 是一种常见且简便的方法，它允许开发者以像素（px）为单位编写样式，然后在运行时自动转换为相对单位 `rem`，以实现响应式布局。`rem` 单位基于根元素（通常是 `<html>` 元素）的字体大小，因此...
移动前端自适应适配布局解决方案和比较
嘿嘿
03-18 299
互联网上的自适应方案到底有几种呢？就我个人实践所知，有这么几种方案： 固定一个某些宽度，使用一个模式，加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自适应。在没出来这种方案之前，第一种做法的人数也不少。类似以下说到的拉钩网。看一下流云诸葛的文章。 以下摘自：从网易与淘宝的font-size思考前端设计稿与工作流 1. 简单问题简单解决 我觉得有些web app并一定很复杂，比如
css中的rem的使用实例和要义说明
洛神赋
08-02 1356
&lt;html&gt; &lt;head&gt; &lt;style&gt; html { font-size: 0.625; /*根元素默认的大小是16px*/ } #peotry { font-size: 10px; } #header { f...
谈一谈rem的应用场景及其如何使用
u010227042的博客
06-09 2223
rem rem是什么 相信大多数同学都写过移动端，那么对rem就很熟悉了，它是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数的一个css单位，也就是我们 前端常说的适配单位rem。 认识rem 当浏览器解析HTML文档时，创建了一个用来代表页面元素的集合，叫做DOM（文档对象模型，Document Object Model）。树状结构，每一个节点代表一个元素。<html>就是顶层节点（根节点），在下面的是它的子节点<head>和<body..
转载（web app变革之rem）
weixin_30699741的博客
12-26 764
rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到r...
rem的使用
nosayno的博客
12-29 840
国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别呢？ 在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“
html 中rem是什么单位,CSS3中REM单位的用法详解（代码示例）
weixin_39739661的博客
06-10 350
很多网站都在使用难以在越来越多的不同设备中调整的像素单元，CSS3引入了一些新的单位，包括REM单位，它代表“root em”，本篇文章给大家分享的内容是关于REM的使用。那么，我们如何使用REM？假设我们有这个CSS：CSSarticle h2 {font-size:20px;}article p {font-size:12px;}首先，我们需要确定相对于所有字体的px大小。为了方便起见，我所做...
移动端使用rem布局-案例
JackieDYH的博客
06-29 433
在页面引入这段js代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth;
rem的用法
qq_15980201的博客
11-20 313
1.rem（font size of the root element）是指相对于根元素的字体大小的单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二者都是相对单位 2.我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，web app的屏幕适配有很多中做法
rem的使用方法
JHY97的博客
01-24 4208
一、概念 rem指对于根元素的字体大小单位，例如根字体font-size为10px，则1rem大小即等于10px 二、案例 使用媒体查询+rem或者js，在不同宽度的视口下自动调整字体大小 <body> <div>rem字体大小</div> </body> <script> var c=()=>{ // 获取设备的宽度 let w = documen
react使用 postcss-pxtorem的示例
最新发布
06-20
在React应用中使用`postcss-pxtorem`是为了将设计稿中的像素值转换为相对单位（如rem），这样可以在不同屏幕尺寸上保持良好的响应式设计。以下是一个简单的示例，展示如何在React项目中设置和使用`postcss-pxtorem`： 首先，你需要安装`postcss`, `postcss-loader`, 和 `postcss-pxtorem` 这些依赖。在你的项目目录下，打开命令行并运行： ```bash npm install --save-dev postcss postcss-loader postcss-pxtorem ``` 然后，在`webpack.config.js`或`.babelrc`文件中配置PostCSS和`postcss-pxtorem`： **webpack.config.js** ```javascript module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', { loader: 'postcss-pxtorem plugins: () => [require('postcss-pxtorem')({ rootValue: 100, // 根元素的font-size，默认100px propList: ['*'], // 应用转换的CSS属性，默认除了user-select等 unitPrecision: 5, // 小数位数，默认5 minPixelValue: 1, // 像素值的最小值，默认1 })] } } ] } ] } }; ``` **.babelrc** (如果使用Babel) ```json { "plugins": ["postcss"], "presets": ["@babel/preset-env"] } ``` 以上配置会在处理`.css`文件时自动应用`postcss-pxtorem`插件。 接下来，你可以创建一个`.scss` 或 `.css` 文件，并使用像素单位（如`px`）编写样式： ```scss body { font-size: 16px; /* 这会被转换为 rem 格式 */ padding: 20px; } ``` 现在，当浏览器加载时，这些像素值会被转换成相对于根元素字体大小（通常设置为100px）的rem值。如果你有任何CSS文件中使用了px，它们也会被相应地转换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

howard2005

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值