em与rem的区别

最新推荐文章于 2024-03-15 10:03:37 发布

高明懿大可爱

最新推荐文章于 2024-03-15 10:03:37 发布

阅读量3k

点赞数 9

分类专栏：前端 HTML5 文章标签： html5 css css3

本文链接：https://blog.csdn.net/qq_42459832/article/details/109863050

版权

前端同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

HTML5

15 篇文章 3 订阅

订阅专栏

在css中px、em、rem，这三个的区别是：

px是固定像素，一旦设置了就无法因为适应页面而改变。
em是rem相对于px更具有灵活性，他们是相对于长度单位的变化而变化，更适应于响应式布局。

em相对于父元素
rem相对于根元素

em的具体解析：

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话相对于该元素的font-size。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style>
        div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
 background-color: aqua;
}
p {
  font-size: 0.5em;/* 在div的基础上大小再除以2 */
  width: 20em; /* 10em表示和font-size同等大小,以此乘除表示放大或缩小几倍 */
  height: 10em;
background-color: blueviolet;
}
span {
  font-size: 0.5em;  /* 在p的基础上大小再除以2 */
  width: 10em;
  height: 10em;
 background-color: chartreuse;
  display: block;
}
    </style>
	</head>
	<body>
        <div>
            我是父亲div
            <p>
                我是儿子p
                <span>孙子span</span>
            </p>
        </div>
	</body>
</html>

在这里插入图片描述

rem具体解析：

rem是全部的长度都相当于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位为rem。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	<style>
    html {
        font-size: 10px;
        }
    div {
        font-size: 4rem; /* 10px为1rem */
        width: 40rem;  /* 10px为1rem */
        height: 40rem;
       background-color: aquamarine;
    }
    p {
        font-size: 2rem; /* 20px */
        width: 30rem;
        height: 30rem;
     background-color: plum;
    }
    span {
        font-size: 1.5rem;
        width: 10rem;
        height: 10rem;
       background-color: peru;
        display: block;
    } 
    </style>
	</head>
	<body>
        <div>
            我是父亲div
            <p>
                我是儿子p
                <span>孙子span</span>
            </p>
        </div>
	</body>
</html>

在这里插入图片描述
当用rem做响应式时(与Bootstrap搭配食用），直接在媒体中改变html的font-size那么用rem作为单位的元素的大小都会相应改变。

如果帮到你了，可不可以悄咪咪的给我点个赞ʕ•̀ ω • ʔ

高明懿大可爱

关注

9
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
em与rem的区别

在css中px、em、rem，这三个的区别是：px是固定像素，一旦设置了就无法因为适应页面而改变。em是rem相对于px更具有灵活性，他们是相对于长度单位的变化而变化，更适应于响应式布局。em相对于父元素rem相对于根元素em的具体解析：子元素字体大小的em是相对于父元素字体大小元素的width/height/padding/margin用em的话相对于该元素的font-size。<!DOCTYPE html><html> <head> &
复制链接

扫一扫