简述 pt、rpx、px、em、rem、百分比、vh、vw的区别
2023-09-21
1071 字约 4 分钟
...简述 pt、rpx、px、em、rem、%、vh、vw的区别
设备物理像素
pt：屏幕宽、分辨率，其中每一小份就是1pt。
css 像素
px：
- pc 机大屏幕显示器，1px约等于0.76个物理像素
- 手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。
- px 也是一个相对单位
- px 是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。
- 手机屏幕大小不一，差异较大，所以反而不希望一个元素在所有手机上显示一样大。而是希望能够自动等比缩放。所以移动端不用px。
- 通常PC端大屏浏览器的网页，使用px 单位比较多。
- 移动端少用，因为 px 的长度相对固定，无法根据大小不一的移动端设备自适应改变大小。
rem:
- 以网页根元素
<html>元素上设置的默认字体大小为1rem默认1rem=16px - 可以实现响应式布局。
- 响应式布局指的是元素大小能根据屏幕大小随时变化。
- 所有以
rem为单位的位置、大小都跟着根元素字体大小而变化。 - 所以只要在屏幕大小变化的时候改变根元素的 font-size 就可以了。
em:
- 父元素的字体大小为1em 用的不多。
- 相对于父元素字体大小的单位，多层嵌套可能导致累积计算。
rpx:
小程序专用。
- 以iPhone 为标准，物理像素750，分辨率 375。无论屏幕大小，都将屏幕分成750份，每份就是1rpx, 1rpx=0.5px=1pt
- 优点：通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配。
vm/vh:
CSS3 新特性。
- vh: 无论视口高度多少，都将视口高均分为100份，每一小份就是1vh，所以，也是相对单位可随视口大小变化而自动变化。
- vw：无论视口宽度多少，都将视口宽均分100份，每一小份就是1vw，所以也是相对单位，可随视口大小变化而自动变化。
- vw 和 vh 本质就是%
- 这里视口指的是浏览器内部的可视区域大小。
%:
- 通常认为子元素的百分比完全相对于直接父元素，但是，不总是相对于父元素的对应属性值。
- 子元素的 top 和 bottom 如果设置百分比，则相对于直接非 static 定位（默认定位）的父元素高度。
- 子元素的left 和 right 如果设置百分比，则相对于直接非 static 定位父元素的宽度。
- 子元素的 padding/margin 如果设置百分比，不论是垂直方向或者水平方向，都相对于直接父亲元素的padding/margin,与父元素的height有关。
- 因为 % 不总是相对于父元素的宽高或者屏幕大小，所以开发少用。
如果您觉得这篇文章有帮助，请点个赞吧～
相关文章
更多文章 →css2025-03-04
CSS 实现文本省略显示【单行，2行，多行】
在 中，长文本内容可能会超出其容器的范围。为了保持良好的用户体验，我们通常会将超出的文本部分以省略号显示。本文将详细介绍如何在CSS中限制文本显示一行、两行或多行，超过部分显示省略号。 1\. 前言 限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。 2\. 单行文本省略 要实现单行文本省略，主要使用以下CSS属性： : 禁止文本换行。 :...
学习面试
css2025-03-04
css中，有哪些方式可以隐藏页面元素？区别?
一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过 隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path dis...
学习面试
css2025-03-04
css实现正方形的几种方案及优缺点
前言 在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱 正方形 这很简单，设置盒子宽高都为200px就可以了 自适应正方形 青铜 提起自适应，想必都会想到 rem 、 vw 等相对单位，我们分别用这些单位来实现一下。 rem 屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px \ 160px； 屏幕宽度小于120...
学习面试
css2025-03-04
Flexbox 弹性布局
一、是什么 简称 box，意为”弹性布局”，是一种一维的布局模型。一次只能处理一个维度上的元素布局，一行或者一列。 采用Flex布局的元素，称为 容器（ ），简称”容器“；它的所有子元素自动成为容器成员，称为 项目（ ），简称”项目“。 容器中默认存在两条轴， 主轴 和 交叉轴 。项目默认沿主轴排列，通过 来决定主轴的方向。 每根轴都有起始线和终止线，用来描述flexbox元素的方向。 任何一个容器都可以指定为 布局。设为 Flex 布...
学习面试
css2025-03-04
提升CSS渲染性能
1\. 提升CSS渲染性能: 2\. 合适使用css选择器: 3\. 提升css文件加载的性能: 4\. 精简css代码: 5\. 合理使用web fonts: 6\. css动画优化:
学习面试
css2024-08-29
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局，因为 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 。 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...
学习面试
评论
请登录后发表评论
去登录