CSS单位（px em rem）

最新推荐文章于 2024-04-30 13:46:36 发布

星灭233

最新推荐文章于 2024-04-30 13:46:36 发布

阅读量916

点赞数

分类专栏：随笔文章标签： css 前端

本文链接：https://blog.csdn.net/ksx2333/article/details/115771519

版权

随笔专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

前言

绝对长度单位

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。

相对长度单位

相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。

1 px（绝对长度单位）

px本质物理像素设备本身某个面积上像素点
像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。

2 em（相对长度单位）

em是相对于父级的font-size的如果找不到会找到跟html的font-size
它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；

3 rem（相对长度单位）

rem是永远找的是跟html的font-size
rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。

4 em和rem的区别

em是相对于父级的font-size的如果找不到会找到跟html的font-size
rem是永远找的是跟html的font-size
假如：

<style>
        html{
            font-size:20px; /*  不写的话是默认值 一般为16px  */
        }        
        .parent{
            font-size:10px;
        }
        .demoone{
            width:10em; /*  em是相对单位  */
        }
        .demotwo{
            width:10rem; /* rem也是相对单位 */
        }
</style>
        ///
<body>
    <div class="parent">
        <div class="demoone"></div>
        <div class="demotwo"></div>
    </div>
</body>

那么此时1em=10px，1rem=20px

5 rpx单位

rpx单位是微信小程序中css的尺寸单位，rpx会根据屏幕分辨率调整元素尺寸，可以根据屏幕宽度进行自适应。
微信小程序规定屏幕的基准宽度为750rpx（iphone6尺寸）。此时1rpx = 1px 。
假设设计稿尺寸为640px，我们需要构建一个宽为100px的div，则我们可以设置其width = 750rpx * 100 / 640 = 117.1875rpx。

6 upx单位

uni-app 使用 upx 作为默认尺寸单位， upx 是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app 规定屏幕基准宽度750upx。
开发者可以通过设计稿基准宽度计算页面元素 upx 值，设计稿 1px 与框架样式 1upx 转换公式如下：设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx。

开发微信小程序时，可以用rpx替换upx使用。