CSS font-size: em&rem

本文详细解释了CSS中em与rem单位的概念及其用法。em单位是相对于当前对象内文本的字体尺寸,而rem单位则相对于HTML根元素。文章通过实例展示了这两种单位在实际布局中的应用效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

字体大小(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。

针对这个Vue项目进行响应式布局调整,主要目标是让页面在不同设备上都能自适应显示:<template> <div class="family"> <!-- 顶部导航栏 --> <NavBar /> <!-- 首页内容区域 --> <div class="content-banner"> <hotel-reservation class="hotel-reservation"></hotel-reservation> </div> <div class="banner-text"> <p class="text" :class="{ textEn: $i18n.locale === 'en' }">{{ $t('Family') }}</p> <!-- <span class="top1" >Wedding Banquet & Conference</span> --> </div> <div class="content-wrapper"> <div class="title-box"> <p class="title-zh" :class="{ textEn: $i18n.locale === 'en' }">{{ $t('trip2') }}</p> </div> <!-- 一起脉动 --> <div class="content-box"> <div class="text-box"> <p class="content margin-bottom-20" :class="{ textEn: $i18n.locale === 'en' }"> {{ $t('text28') }} </p> <p class="more":class="{ textEn: $i18n.locale === 'en' }">{{ $t('more7') }}</p> </div> <div class="img-box"> <img src="@/assets/wedding/cup.png" alt="" /> </div> </div> <!-- 专业策划 --> <div class="content-box"> <div class="img-box"> <img src="@/assets/wedding/table.png" alt="" /> </div> <div class="text-box"> <p class="title-zh text-center" :class="{ textEn: $i18n.locale === 'en' }">{{ $t('Professional') }}</p> <p class="content margin-top-20" :class="{ textEn: $i18n.locale === 'en' }"> {{ $t('text20') }} </p> <p class="content"> </p> <p class="more div-center" :class="{ textEn: $i18n.locale === 'en' }">{{$t('more8')}}</p> </div> </div> <!-- 婚宴进行中 --> <div class="content-box"> <div class="text-box"> <p class="title-zh text-center" :class="{ textEn: $i18n.locale === 'en' }">{{ $t('progress') }}</p> <p class="content margin-top-20" :class="{ textEn: $i18n.locale === 'en' }"> {{ $t('text21') }} </p> <p class="more div-center" :class="{ textEn: $i18n.locale === 'en' }">{{ $t('more9') }}</p> </div> <div class="img-box"> <img src="@/assets/wedding/flower.png" alt="" /> </div> </div> </div> <!-- 底部导航栏 --> <Footer /> </div> </template> <script> export default { name: "family", data() { return { }; }, }; </script> <style scoped> .content-banner { width: 100vw; height: 62rem; margin: 0 auto; background-image: url("@/assets/wedding/flower.png"); background-size: 100% 100%; position: relative; } .hotel-reservation { width: 120rem; height: 12rem; margin: 0 auto; position: relative; top: 45rem; } .content-wrapper { width: 120rem; margin: 0 auto; } .title-box { text-align: center; margin: 6rem 0; } .content-box { display: flex; justify-content: space-between; margin-bottom: 10rem; } .title-en{ font-size: 3rem; font-weight: bold; line-height: 2em; font-family: "Times New Roman", Times, serif; } .textEn { font-family: "Times New Roman", Times, serif !important; } .banner-text { position: absolute; top: 10rem; left: 20%; padding: 1rem 24rem; font-size: 3.2rem; line-height: 2em; font-weight: bold; color: #fff; text-align: center; background-color: rgba(1, 1, 1 1.5); } .text { margin-top: 2rem; font-family: "FangSong"; font-size: 10rem; line-height: 2em; text-align: left; padding: 0 4rem; text-align: justify; -webkit-text-justify: inter-word; text-justify: inter-word; } .top1{ font-family: "Times New Roman", Times, serif; font-size: 6rem; font-weight: bold; } .title-zh { font-size: 4.6rem; /* font-weight: bold; */ color: rgb(202, 171, 98); text-align: left; } .content { width: 60rem; font-size: 2rem; line-height: 2; font-family: "Fangsong"; text-align: justify; } .img-box img { width: 50rem; height: 30rem; } .more { width: 15rem; font-size: 2rem; line-height: 2em; color: rgb(202, 171, 98); text-align: center; cursor: pointer; background-color: rgb(238, 235, 235); } .text-box{ text-align: left; } /* 通用属性 */ /* 文本居中 */ .text-center { text-align: left; } /* div居中 */ .div-center { margin: 5rem auto; text-align: center; } /* 上外边距2rem */ .margin-top-20 { margin-top: 2rem; } /* 下外边距2rem */ .margin-bottom-20 { margin-bottom: 2rem; } /* 页面修改区域 */ /* 响应式调整 */ @media screen and (max-width: 1024px) { .content-banner { height: 70rem; } .hotel-reservation { width: 160rem; top: 54rem; } .content-wrapper { width: 160rem; } .title-en { font-size: 4.8rem; } .title-zh { font-size: 5.6rem; } .content { width: 74rem; font-size: 3rem; } .img-box{ width: 54rem; height: 42rem; } .img-box img { width: 54rem; height: 42rem; } .more { width: 20rem; font-size: 2.4rem; } } @media screen and (max-width: 768px) { .content-banner { height: 82rem; background-image: url("@/assets/wedding/flower.png"); } .hotel-reservation { width: 160rem; top: 66rem; } .content-wrapper { width: 160rem; } .content-box { flex-direction: column; } .img-box { order: 2; } .img-box img { width: 100rem; height: auto; } .text-box { order: 1; } .title-en { font-size: 6rem; } .title-zh { font-size: 6.2rem; } .content { width: 160rem; font-size: 4rem; } .img-box { width: 160rem; height: 90rem; } .more { width: 30rem; font-size: 3.2rem; margin-bottom: 5rem; margin-left: 130rem; } } </style>
最新发布
07-05
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值