px,em,rem的区别

最新推荐文章于 2023-06-02 22:41:45 发布

KK要继续努力

最新推荐文章于 2023-06-02 22:41:45 发布

阅读量341

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45393020/article/details/116929336

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

px,em,rem的区别

px,em,rem概述

px指的是像素，相对于显示器分辨率而定。适用于边框等不变化的属性；
em是相对于父节点的字体大小进行变化。适用于响应式布局；
rem是相对于根节点的字体大小进行变化。适用于响应式布局

区别

px,em,rem有2点区别，分别为：

px为固定值，em,rem不固定
em是相对于父节点的字体大小进行变化，rem是相对于根节点的字体大小进行变化。

px设置完成后不会随着屏幕大小的变化而改变，是固定值；
em的改变是相对于父节点font-size大小的改变，与其他节点无关；
rem的改变是相对于html根元素的font-size大小的改变，与其他节点无关
媒体查询中使用rem；

//em
<style>
    .div1{
        font-size: 20px;
    }
    .div2{
        border: 0.5em solid #666;
        width: 100px;
        height: 100px;
    }
</style>
<div class="div1">
        <div class="div2"></div>
</div>

//rem
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            font-size: 10px;
        }
        .div2{
            border: 0.5em solid #666;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
    </div>
</body>
</html>

注意：
为了防止js被禁用或者加载错误，样式重置时需要先设置html元素的font-size为50px，而保持页面主体的字体大小只需要在html样式后为body标签设置font-size:16px;

问题：简述px,em,rem的区别
知识点：px,em,rem的作用

KK要继续努力

关注

0
点赞
踩
1

收藏

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

px,em,rem的区别px,em,rem概述px指的是像素，相对于显示器分辨率而定。适用于边框等不变化的属性；em是相对于父节点的字体大小进行变化。适用于响应式布局；rem是相对于根节点的字体大小进行变化。适用于响应式布局区别px设置完成后不会随着屏幕大小的变化而改变，是固定值；em的改变是相对于父节点font-size大小的改变，与其他节点无关；rem的改变是相对于html根元素的font-size大小的改变，与其他节点无关媒体查询中使用rem；//em<style&
复制链接

扫一扫