免费获取策划方案多一份参考,总有益处

重庆网站建设

Website construction

案例778

重庆网站建设

看看CSS单位:像素,EM和百分比

来源:派臣科技|时间:2020-11-12|浏览:

单元在测量和建造房屋、桥梁或塔等方面起着重要作用,建网站也不例外。在Web上有许多测量方法,特别是在CSS中,即像素、EM和百分比。

在这篇文章中,我们将通过这些单位来进一步了解这些测量单位。

PX

像素是一个固定的单位度量,也是屏幕度量中最小的单位,但是不要将它与定义屏幕分辨率的像素混淆。CSS中的像素与屏幕分辨率无关。

当我们尝试在屏幕分辨率为1024px * 480px的平板电脑上浏览一个宽度为1024px的网页时,这个网页将不适合屏幕。

我曾经经历过这个问题,并发现CSS中的像素实际上不是一个线性单位——它实际上是一个径向测量。

基本上,CSS中的像素度量的是显示区域的长度,而不是屏幕分辨率,所以1024px的屏幕分辨率并不意味着屏幕的长度也是1024px。

更多的像素

我不是这个问题的技术专家,但如果你知道三角,并想了解更多,看看下面Sean B. Plamer的解释:CSS px是一个角度测量。

css-units

查找显示区域

那么,我们如何找到设备的实际显示区域呢?幸运的是,有一个方便的特殊计算器可以粗略估计显示区域的像素,CM到PX的格式。

我们只需要以cm和PPI(点每英寸)/ DPI(点每英寸)为单位的设备长度,您可以从设备盒中获得这些信息。这样看来,我使用的药片只有953pxin长度。

css-units

推荐阅读:像素识别危机

Photoshop中的像素字体大小

在Photoshop中工作时,我们会发现字体大小默认设置为Pt(点)。Pt单位是理想的打印风格。

当我们将其翻译成Web文档时,为了不将其与px混淆,我们可以从下面的菜单更改单位:编辑>首选项>单位和标尺。

在那里,你有一个窗口选项,如下面的截图所示。选择“pixels”作为类型单位。

css-units

px是字体大小。

css-units

新兴市场

EM是一种相对测量。在CSS中,EM指的是来自设备或文档本身的默认字体大小的乘法,这就是为什么我个人把EM称为强调,但当然不要相信我的话。

这里有一个例子;假设在文档中,字体大小被指定为16px。1em等于16px 2em等于32px,以此类推。

尽管EM传统上用于字体大小调整,而且实际上它是浏览器样式中用于测量字体大小的标准单位,但我们也可以使用EM来定义元素的长度。

当使用EM单元工作时,唯一的约束是它不是很直观,但有两种实际的方法我们可以处理这个。首先,我们可以用这个计算器,PX到EM;这是一个我经常使用的计算器。

css-units

另一种方法是将文档的base像素设置为10px,这样计算起来更容易;例如,将15px设置为1.5em。好吧,我希望你能通过这个例子得到基本的思想。

百分比

使用百分比更直接,它相对于父长度进行度量。当父宽度是800px,那么50%将变成400px。近年来,响应式设计开始成为web设计的标准,百分比单位被更频繁地采用。

好的,让我们看一下下面的例子;下面的代码定义了宽度为60%的.container和.main类选择器,但是这些类引用不同的父类,因此它们生成不同的长度。

container将取60%的浏览器视口宽度,而。main将取。container宽度作为它的直接父元素。

css-units

由于百分比也是一个相对单位,所以它也有类似EM单位的约束。不清楚15px等于500px的百分比是多少?在很多情况下,当我们将px单元从设计阶段转换到web文档时,通常会发生这种情况。

有两种方法可以解决这个问题,要么使用传统的计算器,要么如果您习惯使用CSS预处理器,您可以使用Sass中的百分比()函数。

最终的想法

有很多关于在网页设计中使用单元的最佳实践的讨论。但理想情况下,PX单元应该在属性需要精确时使用,例如边框半径和框阴影水平或垂直偏移量,而对于EM单元,W3C建议更好地用于字体大小调整。百分比是用于响应式布局的理想单位。

留言

返回顶部

君
重庆网站建设重庆网站建设看看CSS单位:像素,EM和百分比