CSS font-size: em&rem

太过爱你忘了你带给我的痛 2022-06-14 03:58 165阅读 0赞

字体大小（font-size）单位：em是相对长度单位。它是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（16px）。

例如：

<body>
        <div id="result">
            <p>font-size</p>
        </div>
    </body>

<style type="text/css"> div{ font-size: 10px; } p{ font-size: 2em; } </style>

相当于p的字体大小为20px。

注意：  
1. em的值并不是固定的；  
2. em会继承父级元素的字体大小。例如，如果将上面代码换为：

<style type="text/css"> body{ font-size: 10px; } p{ font-size: 2em; } </style>

p的大小也依旧是20px。

下面来说rem:  
rem是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，也是相对大小，但相对的只是HTML根元素。  
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。

<!DOCTYPE html>
    <html lang="zh-CN">
        <head>
            <meta charset="utf-8" />
            <title>兔子 の test html</title>
            <style type="text/css"> html{ font-size: 15px; } p{ font-size: 2rem; } </style>
            <script type="text/javascript"> </script>
        </head>
        <body>
            <div id="result">
                <p>font-size</p>
            </div>
        </body>
    </html>

此时，p内字体大小为30px。

发表评论取消回复

表情：

评论列表（有 0 条评论，165人围观）

还没有评论，来说两句吧...

相关阅读

相关 css基础 CSS 媒体类型、CSS 属性选择器、CSS 表单、CSS 计数器

阅读目录 CSS 媒体类型媒体类型 @media 规则其他媒体类型 CSS 属性选择器属性选择器

迈不过友情╰/ 2023年10月06日 22:33/ 0 赞/ 74 阅读

相关 CSS变量(CSS Variables)

概述如果突然有一天,当你页面的主题色发生变化时,有许多元素的颜色要一起变化,这是你会考虑怎么做呢?使用Less/Sass/Stylus来定义一个颜色变量?

╰+攻爆jí腚メ/ 2023年03月03日 11:25/ 0 赞/ 206 阅读

相关 [Vue][Sass]配置在不同宽度时的html.style.fontsize值，并通过rem适配

App.vue中： <template> <div id="app"> <span class="text">ABCDEFG</span>

深藏阁楼爱情的钟/ 2022年12月03日 02:23/ 0 赞/ 147 阅读

相关 CSS——CSS变量

一、定义 /定义/ scope{ --variable:value; } /使用/ selector{ -

太过爱你忘了你带给我的痛/ 2022年11月03日 05:45/ 0 赞/ 195 阅读

相关 rem .css,CSS rem

在移动端飞速发展的当下，移动端页面的适配越来越成了大家所关注的问题，当我们把PC端的px拿到移动端，发现越来越不适用，媒体查询实在是太繁琐了。进而出现了em、rem、vw等单位

喜欢ヅ旅行/ 2022年09月02日 15:40/ 0 赞/ 224 阅读

相关【CSS】CSS+HTML‘VS’CSS+XML

首先上个网页效果图： ![静夜思][20160530122945507] 我们平常都用html+css+JavaScript来写网页，使网页美观生动。今天先不说Jav

r囧r小猫/ 2022年08月22日 14:13/ 0 赞/ 191 阅读

相关【CSS】css grid 布局

css grid布局出来很久了，可以翻译成栅栏布局，或者网格布局，看到了一个很好的应用，所以写下此篇基础教程。比如我们要达到下面这样一个效果要怎么做？ ![2018051

快来打我*/ 2022年05月25日 12:05/ 0 赞/ 430 阅读

相关 CSS之CSS Tools: Reset CSS

地址：[https://meyerweb.com/eric/tools/css/reset/][https_meyerweb.com_eric_tools_css_reset]

青旅半醒/ 2022年05月20日 02:49/ 0 赞/ 359 阅读

相关【CSS】 CSS 定位

css 定位和浮动　　\\\\\\\本章大量内容copy自w3school\\\\\\\\\ 　　定位对于html界面还是很重要的，因为定位会直接影响到用户的视图。对于c

╰+攻爆jí腚メ/ 2022年03月30日 10:55/ 0 赞/ 367 阅读

相关 js移动端自适应动态设置html的fontsize

JS设计移动端页面时会遇到自适应问题，大多数都知道用rem来设置页面的比例大小，下面就来说几种常见的html中的fontsize设置方法： 1.使用flexible.js插件

不念不忘少年蓝@/ 2021年07月27日 01:51/ 0 赞/ 375 阅读