CSS em vs px... 移动浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2515991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
em vs px... for mobile browsers
提问by Jitendra Vyas
For desktop browser all modern browser uses Zoom functionality so we can use PX but if same site can be seen on mobile then would px not be good for zooming in mobile browsers. or use of px is also fine for mobile browsers.
对于桌面浏览器，所有现代浏览器都使用缩放功能，因此我们可以使用 PX，但如果可以在移动设备上看到相同的站点，那么 px 将不适用于移动浏览器的缩放。或者使用 px 也适用于移动浏览器。
even if we don't care for IE 6 , should we use em in place of px still if we are not making different site for mobile, same site will be seen on both desktop and mobile phones (iphone, blackberry, windows mobile, opera mini, android etc?
即使我们不关心 IE 6 ，如果我们不为移动设备制作不同的网站，我们是否仍然应该使用 em 代替 px，相同的网站将在台式机和手机上看到（iphone、blackberry、windows mobile、opera）迷你，安卓等？
采纳答案by bobince
pxwon't be a real actual pixel when the screen is zoomed out on a modern mobile browser. These browsers are effectively emulating a desktop browser with desktop browser-size pixels.
px当屏幕在现代移动浏览器上缩小时，不会是真正的实际像素。这些浏览器有效地模拟了具有桌面浏览器大小像素的桌面浏览器。
So for this type of browser using pxis no worse than it is for a normal desktop browser. You can do it if you want without major problems, but in both situations emis preferable for the main body content, if you can.
所以对于这种类型的浏览器使用px并不比普通桌面浏览器差。如果您愿意，您可以在没有大问题的情况下执行此操作，但如果可以的话，在这两种情况下em，主体内容都更可取。
回答by Anonymous Coder
You can use this trick for converting fonts from px to em in your CSS:
您可以使用此技巧将 CSS 中的字体从 px 转换为 em：
body {
font-size: 62.5%; /* resets the page font size */
}
Then specify your font sizes like this:
然后像这样指定你的字体大小：
p {
font-size: 0.8em; /* equals 8px */
font-size: 1.0em; /* equals 10px */
font-size: 1.6em; /* equals 16px */
font-size: 2.0em; /* equals 20px */
}
And so on. Then you can convert px to em for your layout at PXtoEm.com.
等等。然后，您可以在PXtoEm.com将 px 转换为 em 用于您的布局。
回答by thecoshman
PX is a fixed pixel size EM is relative to font size
PX 是固定的像素大小 EM 是相对于字体大小的
So really, yes you should probably use EM for a lot more of web sites. It will let a user define how large they want there font and your site can scale around it.
所以真的，是的，您可能应该将 EM 用于更多网站。它将让用户定义他们想要多大的字体，您的网站可以围绕它进行缩放。
However, most web-devs like the more specific PX as they can know exactly how things are displayed relative to each other.
然而，大多数网络开发人员喜欢更具体的 PX，因为他们可以确切地知道事物相对于彼此的显示方式。
But seeming as desktops and mobiles have such drastically differing resolutions, its probably just going to be easier to redesign your site for mobile browsing.
但是，由于台式机和移动设备的分辨率差异很大，因此重新设计您的网站以进行移动浏览可能会更容易。
回答by Gerald Senarclens de Grancy
I recommend not to use pixel precision designs generally and particularly when developing for mobile devices. The reasons are simple:
我建议一般不要使用像素精度设计，尤其是在为移动设备开发时。原因很简单：
- You're dealing with devices with screens ranging from tiny resolutions to > 1920x1080 and there is no 'one size fits all' approach; also consider that your users might not know that a zoom function even exists in their browsers.
- When developing for mobile devices be aware that not many of them support a wide variety of font sizes, so you cannot rely on pixel precise fonts. Line-height is not supported at all by some mobile browsers. Thus if your design relies on pixel precision for, say a menu bar, and you design the bar to be x pixels high, the result may look completely wrong.
- 您正在处理屏幕分辨率从微小到 > 1920x1080 的设备，并且没有“一刀切”的方法；还要考虑到您的用户可能不知道他们的浏览器中甚至存在缩放功能。
- 在为移动设备开发时请注意，它们中支持多种字体大小的并不多，因此您不能依赖像素精确的字体。某些移动浏览器根本不支持行高。因此，如果您的设计依赖于像素精度，例如菜单栏，并且您将栏设计为 x 像素高，结果可能看起来完全错误。
Dan Cederholm's book "Bulletproof Web Design" may not be quite as bulletproof as the title suggests, but it's a really good start for answering your question/ solving your problem.
Dan Cederholm 的书“Bulletproof Web Design”可能不像标题所暗示的那样防弹，但它是回答您的问题/解决您的问题的一个非常好的开始。
回答by Boris Guéry
Pixels are fixed, one pixel will use the same place both on a mobile or on any display. Ems are relative, they are so called because they use the approximate size of the uppercase letter 'M'.
像素是固定的，一个像素将在移动设备或任何显示器上使用相同的位置。Ems 是相对的，之所以这么称呼是因为它们使用大写字母“M”的近似大小。
So, yes, you should use ems, since they will be adjusted depending on the screen, and your fonts are likely to fit better with them.
所以，是的，您应该使用 em，因为它们会根据屏幕进行调整，并且您的字体可能更适合它们。
