CSS单位之间的关系

2020-04-09 作者:网站首页   |   浏览(60)

时间: 2019-12-24阅读: 63标签: 单位

PX

px(pixel):像素,显示屏分辨率单位。

像素 (px) 是一种绝对单位(absolute units 因为无论其他相关的设置怎么变化,像素指定的值是不会变化的。其他的绝对单位如下:

PT

pt(point):点,印刷行业常用单位。word中字体大小单位。

mm, cm, in: 毫米(Millimeters),厘米(centimeters),英寸(inches)pt, pc: 点(Points (1/72 of an inch)), 十二点活字( picas (12 points.))

DPI

dpi(dots per inch):每英寸所能打印出点数。即打印分辨率/打印精度。

激光打印机输出分辨率是300dpi--600dpi

印刷机输出分辨率是1200dpi--2400dpi

冲印输出分辨率为150dpi--300dpi

除了px之外,你很可能都不怎么使用其他的单位。

PPI

ppi(pixels per inch):每英寸所包含的像素数目。

1in = 2.54cm = 25.4 mm

ppi与dpi为什么都会出现在手机屏幕参数表(屏幕像素密度)中?

通过计算,以dpi作为单位时数值明显大于以ppi作为单位的。

也有相对单位,他们是相对于当前元素的字号( font-size )或者视口(viewport)尺寸。

dp

dp(Density-independent pixel):安卓开发常用长度单位。

dp与px的关系:

不同安卓手机屏幕分辨率下1dp对应对应不同的px值。

ldpi下1dp=0.75px

mdpi下1dp=1px

hdpi下1dp=1.5px

xhdpi下1dp=2px

xxhdpi下1dp=3px

xxxhdpi下1dp=4px

em:1em与当前元素的字体大小相同(更具体地说,一个大写字母M的宽度)。CSS样式被应用之前,浏览器给网页设置的默认基础字体大小是16像素,这意味着对一个元素来说1em的计算值默认为16像素。但是要小心—em单位是会继承父元素的字体大小,所以如果在父元素上设置了不同的字体大小,em的像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。em是Web开发中最常用的相对单位。ex, ch: 分别是小写x的高度和数字0的宽度。这些并不像em那样被普遍使用或很好地被支持。rem: REM(root em)和em以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体大小将不起作用,所以这听起来像一个比em更好的选择,虽然在旧版本的IE上不被支持(查看关于跨浏览器支持 Debugging CSS.)vw, vh: 分别是视口宽度的1/100和视口高度的1/100,其次,它不像rem那样被广泛支持。

Sp

sp(Density-independent pixel):安卓开发常用字体大小单位。

使用相对单位是非常有用的-你可以相对于你的字体或视口大小来调整HTML元素的大小,这意味着,假设整个网站上的文本大小被视力障碍用户调整为原来的两倍,而网站的布局仍将保持正确。

em

em(emphasize):相对单位,相对于父级元素文本的字体大小

动画的数值

rem

rem(root em):相对单位,css3中提出。相对于html根元素的(body标签内设置字体大小不起作用)。

-

CSS动画能够让页面上的HTML元素动起来。我们来看一个例子,当我们把鼠标浮动到一个段落上的时候,它能够旋转起来。这个例子的HTML代码很简单:

pHello/p

CSS有点复杂:

@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}p { color: red; width: 100px; font-size: 40px; transform-origin: center;}p:hover { animation-name: rotate; animation-duration: 0.6s; animation-timing-function: linear; animation-iteration-count: 5;}

你能看到一些之前没有明确提到的有趣单位 (s、 s、 s、 s...),但是我们感兴趣的是这一行 animation-iteration-count: 5; ——此行控制着动画启动(这里是指光标浮动至段落上时)后会执行多少次,而且这是一个简单的,无单位,纯数字(计算机中称之为整型)。

最常用的 px像素(Pixel),相对于设备的长度单位,像素是相对于显示器屏幕分辨率而言的

px 可谓是 css 中最常用的长度单位,但是仍有许多人不理解 px 是什么,感觉 px 不就是一个小点嘛。要明白 px 就要搞清楚像素、分辨率和像素密度的问题。像素(Pixel)是数字图像的最小组成单元,它不是一个物理尺寸,但和物理尺寸存在一个可变的换算关系(物理尺寸之间的换算是固定的)。像素分为设备像素(device pixels)和 css像素(css pixels),其中存在着转换关系。要搞明白他的转换关系,就要搞明白什么是 dpi、ppi。对手机比较熟悉的同学可能对这两个东西比较了解。dpi 和 ppi 其实都是表示屏幕像素密度,ppi和dpi是同一个概念,Android比较喜欢使用dpi,IOS比较喜欢使用ppi。

屏幕上每英寸可以显示的像素点的数量,单位是ppi,即“pixels per inch”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。

本文由yzc216亚洲城发布于网站首页,转载请注明出处:CSS单位之间的关系

关键词: yzc216亚洲城