css的那些单位

Angus-zoe

已于 2024-06-14 10:57:50 修改

阅读量238

点赞数 3

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

于 2024-06-14 10:41:45 首次发布

本文链接：https://blog.csdn.net/m0_66879773/article/details/139673734

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

px (像素)：
- 含义：像素是屏幕上显示的最小单位，通常用于确定元素的大小和位置。
- 用途：在 Web 开发中经常使用，是最常见的单位之一。但是，当用户缩放页面时，像素单位一般不会按比例缩放，这可能会导致响应性问题。
em：
- 含义：em 是相对长度单位，参照内容所在标签的font-size设置的值，默认是16px 默认字号大小是16px
- 用途：在排版时经常使用，特别是当需要根据元素的字体大小来确定其他元素的大小时。

rem：

含义：相对长度单位，rem 是 "root em" 的缩写，意思是相对于根元素（即 <html>元素）的字体大小的相对长度单位。与 em 不同，em 是相对于元素自身的字体大小的单位。
用途：rem 通常用于响应式设计，因为它可以确保所有元素都相对于相同的基准大小进行缩放。

示例：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /*现在font-size设置为20px   1rem就是20px*/
            font-size: 20px;
        }
        div{
            /* 1rem默认16px html设置font-size是多少rem就是多少 */
            width: 2rem;
            height: 2rem;
            margin: auto;
            background-color: aqua;
        }
 </style>

vw (视窗宽度单位) 和 vh (视窗高度单位)：

含义：vw 和 vh 分别表示视窗的宽度和高度的百分比，其中 1vw 等于视窗宽度的 1%。
用途：vw 和 vh 可以用于创建响应式布局，特别是在移动设备上，可以确保元素的大小与视窗的大小成比例，但是如果视窗较大，外观可能不好看。

示例：

<style>
/* 目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果 */
@vw: 3.75vw;
@vh: 6.67vh;
div{
    width: (68 / @vw);
    height: (28 / @vw);
    background-color: aqua;
}
p{
    width: (68 / @vh);
    height: (28 / @vh);
    background-color: gold;
}


/* 全面屏手机高度更高，如果vw和vh混用，会造成效果变形 */
p{
    width: (68 / @vh);
    height: (28 / @vh);
    background-color: gold;
}

i{
    display: block;
    width: (68 / @vw);
    height: (28 / @vh);
    background-color: blue;
}
</style>

vmin 相对单位，参照视口最小的那一边进行判断，正常情况下跟vw一致(与vmax一般用于解决移动端横屏问题)
vmax 相对单位，参照视口最小的那一边进行判断，正常情况下跟vh一致
rpx (小程序像素)：
- 含义：rpx 是微信小程序中使用的单位，它是响应式像素的意思，它会根据屏幕的宽度进行自适应换算。
- 用途：rpx 通常用于微信小程序的开发中，以确保在不同尺寸和分辨率的设备上都能够正确地显示。
- 示例：
```
<style>

.div{
    /*设置元素字体大小为12px  换算成rpx需要*2
        一般宽度视图宽度最大为750rpx(类似二倍图)
    */
    font-size:24rpx;
}

</style>
```
百分比（%）：
- 含义：百分比单位是相对于父元素的相对长度单位。例如，设置一个元素的宽度为50%，将使其宽度为父元素宽度的一半。
- 用途：百分比单位经常用于创建响应式布局，以及确定元素的大小和位置相对于父元素或其他参考元素的比例关系。
角度单位：
- deg：度，用于表示角度值。例如，transform: rotate(45deg); 将元素旋转45度。
- rad：弧度，用于表示角度值，1rad 等于 180/π 度。例如，transform: rotate(1rad); 将元素旋转1弧度。
时间单位：
- s：秒，用于表示时间值。
- ms：毫秒，用于表示时间值。例如，transition-duration: 500ms; 将过渡效果的持续时间设置为500毫秒。