html,css

css单位

2020-08-13  本文已影响0人  书虫和泰迪熊

1、px 和 pt ,rpx

px:就是pixel像素的缩写,相对长度单位,网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
pt:point,磅,是一个物理长度单位,指的是72分之一英寸。pt=1/72(英寸), px=1/dpi(英寸)
rpx: 是微信小程序中css的尺寸单位,可以根据屏幕宽度进行自适配
譬如iphone6,屏幕宽度为375px ,共有750个物理像素,则1rpx = 0.5px。

2、rem 和 em

em 和 rem都是灵活、 可扩展的单位,由浏览器转换为像素值,具体取决于您的设计中的字体大小设置。
em 和 rem 如何转化像素值
rem:取决于页根元素的字体大小,根元素字体大小乘以你 rem 值
em:像素值将是em值乘以使用em单位的元素的字体大小(注意:不是相对于父元素的字体大小,父元素的字体大小可以影响 em 的值,这种情况的发生,纯粹是因为继承。)

3、vh 和 vw

vh:1vh 等于1/100的视口(viewpoint)高度
vw:假设你要来一个和屏幕同宽的标题,你只要设置这个标题的font-size的单位为vm,那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和viewport大小同步的效果。

4、vmin 和 vmax

vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如,浏览器的宽度设置为1100px,高度设置为700px, 1vmin = 7px, 1vmax = 11px。

5、%(百分比)

一般来说就是相对于父元素
1、对于普通定位元素就是我们理解的父元素
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort(可视窗口)

6、ex 和 ch

ex 和 ch 单位,类似于 em 和 rem, 依赖于当前的字体和字体大小。但是,不同的是,这两货是基于字体的度量单位,依赖于设定的字体。
ch 单位通常被定义为数字0的宽度。你可以在Eric Meyers的博客里找到关于它的一些有意思的讨论,例如将一个等宽字体的字母”N”的宽度设置为40ch,那么在另一种类型的字体里它却可以包含40个字母。
这个单位的传统用途主要是盲文的排版。

参考链接:
https://www.webhek.com/post/7-new-css-units.html
https://www.runoob.com/cssref/css-units.html

上一篇 下一篇

猜你喜欢

热点阅读