区分css的px、em、rem

最新推荐文章于 2021-06-24 17:50:30 发布

cily_undefined

最新推荐文章于 2021-06-24 17:50:30 发布

阅读量500

点赞数

分类专栏： css 文章标签： css rem

本文链接：https://blog.csdn.net/qq_29326717/article/details/73200842

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

px：像素（Pixel），相对长度单位，相对于设备显示器屏幕分辨率的大小。

em：相对长度单位，相对于当前对象内文本的字体尺寸，若未设置文本字体大小则相对于浏览器默认字体大小。

rem：相对HTML根元素的大小，用rem为单位，只需要设置html的字体就可以了。看下面的代码可能会比较直观些：

<!DOCTYPE html>
<html style="font-size: 40px;">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
            font-size: 0.3rem;/* 0.3rem相当于12px,得到的方法为：12/40=0.3  */
        }
        .test1{
            background-color: pink;
            width: 2.5rem;/* 2.5rem相当于100px,得到的方法为：100/40=2.5rem  */
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            margin: 1rem;
        }
    </style>
</head>
<body>

<div class="test1">100*100的正方形</div>
</body>
</html>

这样可以实现自适应还不变形，只要改html标签的字体大小就可以实现整体大小的更改。

cily_undefined

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
区分css的px、em、rem

px：像素（Pixel），相对长度单位，相对于设备显示器屏幕分辨率的大小。em：相对长度单位，相对于当前对象内文本的字体尺寸，若未设置文本字体大小则相对于浏览器默认字体大小。rem：相对HTML根元素的大小，用rem为单位，只需要设置html的字体就可以了。看下面的代码可能会比较直观些： body{
复制链接

扫一扫