css em转px_如何在CSS中将px转换为em？

css em转px

Introduction:

介绍：

We use pixels with almost every scaling property like width, height, etc. Although you don't need to use pixels as a unit while sizing your element as you can use various other units like em or percentage. But pixels, as you might have noticed, is the most used measuring unit. Any beginner who has just started web development must start from pixels and then explore further units. Here in this article we will not just discuss pixels but will also discuss how we can convert one unit to another in CSS.

我们使用几乎具有所有缩放属性(例如宽度，高度等)的像素。尽管在调整元素大小时不需要使用像素作为单位，因为可以使用em或percent等各种其他单位。 但是，您可能已经注意到，像素是最常用的度量单位。 任何刚开始进行Web开发的初学者都必须从像素开始，然后再探索其他单元。 在本文中，我们将不仅讨论像素，还将讨论如何在CSS中将一个单位转换为另一个单位。

Problem:

问题：

Pixels are used widely as a unit while sizing and shaping an image. It is widely used with various images, so if you are planning to resize an image you must go for using pixels as a unit. But if you have been using pixels for a long time, then it is time that you explore other units as well. You can start with the em. Now the catch here is that these two units are not at all equivalent, what it means that if you set the height of an element to 50px then if you change the height to 50em, you will not get the same result. These two units are very different. Now, you must be wondering since these two units are so different than how would anyone who is not aware of the "em" units be able to implement it?

在调整图像大小和形状时，像素被广泛用作一个单元。 它广泛用于各种图像，因此，如果您打算调整图像的大小，则必须使用像素作为单位。 但是，如果您长期使用像素，那么现在也该探索其他单位了。 您可以从em开始。 现在要注意的是，这两个单位根本不相等，这意味着如果将元素的高度设置为50px，然后将高度更改为50em，将不会得到相同的结果。 这两个单位非常不同。 现在，您一定想知道，由于这两个单元之间的差异如此之大，而与任何不了解“ em”单元的人将如何实现它有所不同呢？

Well, the question is apt and so is the solution. Read the next section to find out the answer!

好吧，问题很贴切，解决方案也是如此。 阅读下一节以找出答案！

Solution:

解：

Well, the solution to this problem is very simple. All you need to do is convert the pixel value to em. That's right, just like any conversion you can also convert pixels to em. Like you convert meters to centimeters etc. So how do we convert pixels into em? There are some simple steps to do that, so let us move on with that part.

好了，解决这个问题的方法非常简单。 您需要做的就是将像素值转换为em 。 没错，就像任何转换一样，您也可以将pixel转换为em 。 就像您将米转换为厘米等。那么我们如何将像素转换成em ？ 有一些简单的步骤可以做到这一点，所以让我们继续该部分。

Methods:

方法：

1. You can set a default pixel size first.

   您可以先设置默认像素大小。

2. Second, by taking the reference from the default pixel size you can convert the pixels into ems.

   其次，通过从默认像素大小获取参考，您可以将像素转换为ems。

3. This technique is also possible vice versa i.e. you can set default em size and convert em to pixels.

   反之亦然，也可以使用此技术，即您可以设置默认em大小并将em转换为像素。

Pretty cool right? Who would have thought that we can convert these units just like any mathematical units! So, why don't you give it a try? As a tip, you can always set the default pixel as 16px.

很酷吧？ 谁会想到我们可以像转换任何数学单位一样转换这些单位！ 那么，为什么不尝试一下呢？ 提示，您始终可以将默认像素设置为16px 。

翻译自: https://www.includehelp.com/code-snippets/how-to-convert-px-into-em-in-css.aspx

css em转px