CSS单位之间的关系

更新日期: 2019-12-24阅读: 1.9k标签: 单位

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

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

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

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

  • 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那样被广泛支持。

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

动画的数值

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

<p>Hello</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”的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,屏幕尺寸越小、分辨率越高,像素密度越大,反之越小。  


链接: https://www.fly63.com/article/detial/7030

理解并使用CSS3中的单位rem vh vw vmin vmax

rem vh vw vmin vmax做为CSS3中的新单位,对CSS3的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。

常用长度单位PX/EM/PT/百分比转换公式与对照表

PX、PT、EM、ex和in等都是我们常用的长度单位,尤其在网页的字体大小中经常用到。但是你知道PX、PT和EM之间是如何进行准换的吗?这里为大家找到了一个px、pt、em和percent大小转换的一个表格

CSS中字体单位:px、em、rem和%

对于绘图和印刷而言,“单位”相当重要,然而在网页排版里,单位也是同样具有重要性,在CSS3普及以来,更支持了一些方便好用的单位(px、em、rem…等),这篇文章将整理这些常用的CSS单位,也帮助自己未来在使用上能更加得心应手。

被误解的 em 单位

em 单位往往被认为是相对于父元素的 font-size 大小来进行计算的。例如一个元素的父元素设置了如下的 font-size:而其中的 div 设置了 font-size 设置了 1.5em :那么 div 元素的 font-size = 20 * 1.5 = 30px.

CSS尺寸单位

前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍

CSS角度单位:deg、grad、rad、turn

度(Degress)。一个圆共360度;梯度(Gradians)。一个圆共400梯度;弧度(Radians)。一个圆共2π弧度;转、圈(Turns)。一个圆共1圈

CSS3单位

像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。

高清屏下canvas重置尺寸引发的问题

我们知道,清空canvas画布内容有以下两个方法。 第一种方法是cearRect函数:二种方法就是用原值重新设置一下canvas的宽(或者高)第二种方法可以起作用,是因为canvas的一个特点:

css 角度单位有哪些?

CSS角度单位有:deg、grad、rad、turn;下面本篇文章给大家介绍一下这些CSS角度单位。度(Degress)。一个圆共360度;梯度(Gradians)。一个圆共400梯度;弧度(Radians)。一个圆共2π弧度;转、圈(Turns)。一个圆共1圈

html中1pt等于多少px?

在印刷排版中,point是一个绝对值,它等于1/72英寸,可以用尺子丈量的,物理的英寸。但是在css中pt含义却并非如此。因为我们的显示器被分割为了一个个的像素,单个像素只能有一种颜色,要在屏幕上显示

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!