px? pt? dp? em?rem?vw?vh?ch?ex?这些单位你了解吗?

2023-12-11 18:28
文章标签 dp em 了解 ch rem 单位 ex pt px vh vw

本文主要是介绍px? pt? dp? em?rem?vw?vh?ch?ex?这些单位你了解吗?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

前言

一、常见单位

 1、px单位

2、dp单位 

3、pt单位

4、百分比%

5、em单位

6、rem单位

7、vw和vh单位

8、ch、ex单位

二、如何换算

1、 pt和px换算

2、px和dp换算

3、em和px换算

4、rem和px换算

三、总结


前言

前端开发在日常设计中除了最常用的 px 以外,还会经常看到 dp、pt、em、rem 等单位,那么这些单位都有什么区别呢?今天我给大家归纳总结一下,大家记得收藏以备之后工作需要哦~。​​​​​​​

一、常见单位

 1、px单位

px像素,是网页设计和移动应用设计中最常用的单位。表示屏幕上的一个点,根据显示设备具有固定的大小,不受其他因素影响。常用于确定文本、图像和元素的大小和位置。

2、dp单位 

dp(也称为 dip):设备独立像素,是一个相对的尺寸单位,表示屏幕上的一个点。与 px 不同,dp 能够根据设备的像素密度进行自适应缩放,从而在不同设备上保持一致的大小。

3、pt单位

pt是磅值,常用于印刷品设计中。表示打印出来的一个点,和像素不同,它不是固定的,而是基于印刷设备的分辨率和输出质量来计算的。因此,使用磅值可以确保在不同设备上输出的印刷品大小一致。 

4、百分比%

百分比在前端开发中是一个动态单位,永远以当前元素的父元素作为参考进行计算。

元素尺寸百分比

我们可以创建一个容器,在容器中包含网页的主要内容。我们使用百分比来设置容器的宽度和高度,使其能够根据用户的屏幕尺寸自动调整大小。例如:

.container {width: 80%;height: 50%;
}

在这个例子中,容器的宽度和高度都设置为百分比,分别为80%和50%。这意味着无论用户的屏幕尺寸如何,容器都会自动调整大小,并且在任何设备上都能够很好地显示。

 元素位置百分比

通过使用百分比,我们还可以设置元素相对于其容器的位置。这对于设计一个具有居中或者自适应特点的网站非常有用。例如:

.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

在这个例子中,我们使用百分比来设置元素的位置,使其在其容器中居中显示。我们首先使用position:absolute将元素定位为绝对定位,然后使用top:50%left:50%将其位置相对于其容器居中定位。最后,我们使用transform:translate(-50%,-50%)将元素的位置进行微调,使其居中。

 颜色和背景百分比

h1 {color: rgba(100%,0%,0%,0.5);background: linear-gradient(90deg, rgba(100%,0%,0%,0.6) 0%, rgba(100%,0%,0%,0) 100%);
}

在这个例子中,我们使用百分比来设置文本和背景的透明度。具体来说,我们将文本的颜色设置为红色,并将其透明度设置为50%。而背景则使用linear-gradient来设置一个红色渐变背景,同时将透明度从60%到0%进行渐变。这样,我们就可以创建出一个半透明的文本和背景效果。 

5、em单位

em是相对于当前元素的字体大小。通常用于网页设计中设置文本的大小,具有相对的特性,可以根据父元素的字体大小进行缩放。 

<style>div {font-size: 18px;  /* 设置父元素的字体大小 */}span:nth-child(1) {font-size: 1em;   /* 1em相当于1*18px=18px */}span:nth-child(2) {font-size: 18px;}
</style>
<body><div><span>em单位验证</span><br><span>px像素单位验证</span></div>
</body>

上面的代码两个span标签里面的文字是一样的,虽然第一个span标签设置的字体为1em,第二个span标签设置的字体大小为18px,但是最后得到的效果是一模一样的。这是因为span的父元素div设置的字体大小为18px,所以1em=18px。接验证了em单位是相对于父元素而言的。

em特点:

  1. em的值并不是固定的;
  2. em会继承父级元素的字体大小。

6、rem单位

rem是相对于根元素的字体大小。也是用于网页设计中设置文本的大小,但相对于 em,它是相对于根元素的字体大小进行缩放,因此更加稳定和一致。比如我定义:

html{ font-size:14px}

那么设为2rem的话就相当于 2*14px。也就是 

.box{font-size:2rem;/*font-size:28px;*//*2*14px/
}

使用rem为元素设定字体大小时,是相对大小,但相对的只是HTML根元素。因此我们一般使用rem作为移动端的主流单位,可以很好的来控制整个页面的元素大小比例。

优点:

这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

缺点:

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

7、vw和vh单位

vw 相对于视口的宽度。视口被均分为100单位。

h1 {font-size: 8vw;
}

再举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

vh 相对于视口的宽度。视口被均分为100单位

h1 {font-size: 8vh;
}

再举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px

总结:

  •  vw:1vw等于视口宽度的1%。
  •  vh:1vh等于视口高度的1%。

 缺点:兼容性很差,不推荐使用,目前用的很舒服的还是px和rem。

8、ch、ex单位

ch单位

ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论,例如将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。常用于设置固定宽度的元素,如表格、代码块等,可以保证每个字符的宽度一致。

使用场景:

用途主要是盲文的排版,但是除此之外,肯定还有可以应用他的地方。

ex单位

ex 定义为当前字体的小写x字母的高度或者 1/2 的 1em。很多时候,它是字体的中间标志。

使用场景:

有很多用途,大部分用于版式的微调。比方说,sup 元素(上角文字标),可以通过position:relative;bottom: 1ex;实现 。

不同点:

这两是基于字体的度量单位,依赖于设定的字体。

二、如何换算

1、 pt和px换算

公式一: 1pt= (DPI / 72) px

当photoshop中新建画布的分辨率为72ppi( 即 72dpi时 ), 1pt=1px; 当新建画布分辨率为72*2=144ppi时,1pt=2px

2、px和dp换算

dp为安卓开发时的长度单位,根据不同的屏幕分辨率,与px有不同的对应关系。

安卓端屏幕大小各不相同,根据其像素密度,分为以下几种规格:

1dp定义为屏幕密度值为160ppi时的1px,即,在mdpi时,1dp = 1px。 以mdpi为标准,这些屏幕的密度值比为:ldpi : mdpi : hdpi : xhdpi : xxhdpi = 0.75 : 1 : 1.5 : 2 : 3;即,在xhdpi的密度下,1dp=2px;在hdpi情况下,1dp=1.5px。其他类推。

1dp=(屏幕ppi/ 160)px

以WVGA屏为例,该屏幕为480px*800px,按3.8寸屏算,点密度 √ (480^2 + 800^2) / 3.8 = 245,约等于240,对应于hdpi屏幕,所以该屏幕1dp=1.5px

3、em和px换算

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

4、rem和px换算

1rem等于html根元素设定的font-size的px值 如果css里面没有设定html的font-size,则默认浏览器以1rem= 16px来换算。

假如我们在css里面设定下面的css。那么后面的CSS里面的rem值则是以这个14来换算。

 html{font- size:14px} 

例如设定一个div宽度为3rem,高度为2.5rem. 则它换算成px为width:42px.height:35px 同理,假如一个设计稿为宽度42px,高度为35px 则换成rem,则是42/14=3rem, 35/14=2.5rem。 (14就是html的font-size)。

三、总结

总的来说,选择合适的设计计量单位要根据具体的设计场景和需求来决定。例如,在网页设计中,使用 em 和 rem 可以实现响应式设计,而使用 vw 和 vh 可以实现流体布局。在印刷品设计中,则需要使用 pt 来保证输。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下博主会持续更新。。。。

我的线上博客:富朝阳的博客

这篇关于px? pt? dp? em?rem?vw?vh?ch?ex?这些单位你了解吗?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/481658

相关文章

关于数据埋点,你需要了解这些基本知识

产品汪每天都在和数据打交道,你知道数据来自哪里吗? 移动app端内的用户行为数据大多来自埋点,了解一些埋点知识,能和数据分析师、技术侃大山,参与到前期的数据采集,更重要是让最终的埋点数据能为我所用,否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式,可以区分为: 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理:自动程度高的,能解决通用统计,便于统一化管理,但个性化定

hdu4826(三维DP)

这是一个百度之星的资格赛第四题 题目链接:http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1004&cid=500 题意:从左上角的点到右上角的点,每个点只能走一遍,走的方向有三个:向上,向下,向右,求最大值。 咋一看像搜索题,先暴搜,TLE,然后剪枝,还是TLE.然后我就改方法,用DP来做,这题和普通dp相比,多个个向上

hdu1011(背包树形DP)

没有完全理解这题, m个人,攻打一个map,map的入口是1,在攻打某个结点之前要先攻打其他一个结点 dp[i][j]表示m个人攻打以第i个结点为根节点的子树得到的最优解 状态转移dp[i][ j ] = max(dp[i][j], dp[i][k]+dp[t][j-k]),其中t是i结点的子节点 代码如下: #include<iostream>#include<algorithm

hdu4865(概率DP)

题意:已知前一天和今天的天气概率,某天的天气概率和叶子的潮湿程度的概率,n天叶子的湿度,求n天最有可能的天气情况。 思路:概率DP,dp[i][j]表示第i天天气为j的概率,状态转移如下:dp[i][j] = max(dp[i][j, dp[i-1][k]*table2[k][j]*table1[j][col] )  代码如下: #include <stdio.h>#include

usaco 1.1 Broken Necklace(DP)

直接上代码 接触的第一道dp ps.大概的思路就是 先从左往右用一个数组在每个点记下蓝或黑的个数 再从右到左算一遍 最后取出最大的即可 核心语句在于: 如果 str[i] = 'r'  ,   rl[i]=rl[i-1]+1, bl[i]=0 如果 str[i] = 'b' ,  bl[i]=bl[i-1]+1, rl[i]=0 如果 str[i] = 'w',  bl[i]=b

uva 10154 DP 叠乌龟

题意: 给你几只乌龟,每只乌龟有自身的重量和力量。 每只乌龟的力量可以承受自身体重和在其上的几只乌龟的体重和内。 问最多能叠放几只乌龟。 解析: 先将乌龟按力量从小到大排列。 然后dp的时候从前往后叠,状态转移方程: dp[i][j] = dp[i - 1][j];if (dp[i - 1][j - 1] != inf && dp[i - 1][j - 1] <= t[i]

uva 10118 dP

题意: 给4列篮子,每次从某一列开始无放回拿蜡烛放入篮子里,并且篮子最多只能放5支蜡烛,数字代表蜡烛的颜色。 当拿出当前颜色的蜡烛在篮子里存在时,猪脚可以把蜡烛带回家。 问最多拿多少只蜡烛。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cs

uva 10069 DP + 大数加法

代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <queue>#include <map>#include <cl

uva 10029 HASH + DP

题意: 给一个字典,里面有好多单词。单词可以由增加、删除、变换,变成另一个单词,问能变换的最长单词长度。 解析: HASH+dp 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#inc

XTU 1233 n个硬币连续m个正面个数(dp)

题面: Coins Problem Description: Duoxida buys a bottle of MaiDong from a vending machine and the machine give her n coins back. She places them in a line randomly showing head face or tail face o