在CSS中处理像素是不是很糟糕？ [英] Is it bad to work with pixels in CSS?

问题描述

在CSS中使用像素数字而不是百分比的兼容性是否不好？如何降低分辨率？是否可以在1-100范围内处理它们？

Is it bad in terms of compatibility to use pixel numbers in CSS instead of percentages? How about lower resolutions? Is it okay to work with them in ranges of 1-100?

推荐答案

这是一个困难的问题，对你的情况。

This is a difficult question, because the answer mostly depends on your situation.

像素不是那么糟糕，我大多也使用它们。 （有时甚至对于字体大小。）

我通常以给定的大小（具有固定宽度布局的像素和具有流体布局的百分比的像素）来修复布局的外部块元素，并且在内部元素I通常在可能的情况下设置百分比。

Pixels are not that bad, I mostly use them too. (Sometimes even for font sizes.)
I usually fix the outer block element of the layout by a given size (pixels with fixed-width layouts, and percentages with fluid layouts), and on the inside elements I usually set percentages whenever possible.

有些元素根本不能用百分比或 em ，特别是来自不理解这些原则的图形设计师的更奇特的东西。

There are some elements which simply can't be styled with percentages or ems, especially the more fancy stuff coming from graphical designers who don't understand such principles.

例如：如果您的网站上有一个简单样式的列，则可以轻松地将其宽度设置为百分比，它有一个背景图像具有特定的宽度，不是设计与缩放的头脑，它只看起来不错的固定宽度。在这种情况下，您必须确保页面的其余部分正确占用剩余的宽度。

For example: if you have a column on your site with a simple style, you can set its width to a percentage easily, but if it has a background image with a specific width that is not designed with scaling in mind, it only looks good with a fixed-width. In such cases, you'll have to ensure that the rest of the page occupies the remaining width correctly.

请注意，您可以使用百分比在一起的像素。

例如，这是一个来自我最新的网络应用程序的代码片段：

Note that you can use pixels with percentages together.
For example, this is a snippet from one of my latest web apps:

min-width: 800px;
width: 80%;
max-width: 1500px;

选择还取决于您想要实现的设计或布局。

The choice also depends on what design or layout you would like to achieve.

对于固定宽度布局，像素值很好。如果设计师给你一个Photoshop图像包含真的很奇怪的东西，这将是非常复杂，甚至想想它将如何调整大小，你应该肯定去这样。

For a fixed-width layout, pixel values are fine. If a designer gives you a Photoshop image that contains really fancy stuff which would be extremely complicated to even think about how it would resize, you should definitely go for this.

如果您的布局需要动态，您应该使用百分比确保其随分辨率更改而扩展，并且您可以使用上述代码段使其在其他情况下看起来更加疯狂。

If your layout needs to be dynamic, you should use percentages to make sure that it expands as the resolution changes, and you can use the above code snippet to make it look better in scenarios where it would otherwise look insane.

一些布局（例如，想象如果StackOverflow会占用所有的空间）在宽度上看起来很丑陋。 1920像素 - 线宽将是如此疯狂地高，这将是非常不方便阅读。

这是 max-width 的用途。即使在某些动态布局中，您也必须限制网站的最大宽度，以最大限度地提高可用性和可读性。

Some layouts (eg. imagine if StackOverflow would take up all the space) would look pretty ugly on a width of eg. 1920 pixels - the line widths would be so insanely high that it would be extremely unconvenient to read.
This is what max-width is for. Even in some dynamic layouts, you'll have to limit the maximal width of your site to maximize usability and readability.

并考虑到较小的屏幕。 >
确实，没有人使用800×600的桌面了，但是很多人用移动设备浏览网络，这些设备的分辨率更低。

这是 min -width 用于：使您的动态扩展布局在较小的resoultions上看起来不那么拥挤。

And also take into consideration the smaller screens.
It is true that noone uses a 800×600 desktop anymore, but many people browse the web with mobile devices which have even smaller resolution.
This is what min-width is for: to make your dynamically expanded layout look less crowded on smaller resoultions.

我希望这有助于。

EDIT：

The Smashing Book has some very nice thoughts about the subject.

编辑2：

我不想让我的帖子听起来像是我想强迫你的访问者基于像素的大小。

（显然，有些人的评论误解了我）

I don't want my post to sound like I want you to force pixel-based sizing on your visitors.
(Apparently, some people in the comments misunderstood me in such a way.)

清除它：

我相信理想的布局是一个调整到任何可能的分辨率或设置。

然而，我们不能总是完美的一切。时间/资源和目标受众是决定您的网站是否需要高级功能的关键。

I believe that the ideal layout is one that adjusts well to any possible resolution or setting.
However, we can't always do everything perfectly. Time/resources and the target audience are the key to determine if your site requires that advanced functionality or not.

我建议您使用正确的方法

如果您正在开发一个网站，其中有大量的访问者需要对网站进行更高级的调整，非常值得。

（当然，有时候我们只是为了自己有正确的方式做事情的感觉，但是并不总是一个经济上合理的决定。）

If you are developing a site which will have a significant percentage of visitors who require more advanced adjustments to the site, it may be well worth it.
(Of course, sometimes we just do it for ourselves to have the feeling of doing things the right way, but is is not always a financially sound decision.)

但是，在决定布局之前，你应该做什么样的网站，谁将是访问者和这样的东西，以及是否值得花时间做适当的研究他们流动或更动态。

Still, you should do the proper research about what sort of site will be it, who will be the visitors, and such stuff, before deciding about layouts, and whether it is worth the time to make them fluid or more dynamic.

这篇关于在CSS中处理像素是不是很糟糕？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！