区分css的px、em、rem

来源：互联网发布：网上开淘宝店要钱吗编辑：程序博客网时间：2024/06/03 21:39

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标签的字体大小就可以实现整体大小的更改。

阅读全文

0 0