在 CSS 中使用像素是不是很糟糕？

Question

在 CSS 中使用像素数而不是百分比在兼容性方面是否会很差？低分辨率怎么样？可以在 1-100 的范围内使用它们吗？

Answer 1

所有测量都有自己的目的：

• 将像素用于基于像素的事物，例如边框。您可能不希望最终宽度为 1.3422 像素的边框。

• 对基于文本的事物使用以文本为中心的度量（em、ex），例如内容区域、标签和输入框。这是确保有一定长度和宽度的文本空间的简单方法。

• 对基于窗口的事物使用百分比，例如列。

当然也有例外。例如，您可能想要指定最小列宽（以像素为单位）。但按照上述操作，您的页面将能够很好地扩展。始终放大和缩小页面，看看它们如何在不同的字体大小和浏览器形状下工作——以后不要感到惊讶。

Answer 2

这是一个很难的问题，因为答案主要取决于您的情况。

像素还不错，我也主要使用它们。 （有时甚至是字体大小。）
我通常按​​给定大小（固定宽度布局的像素和流体布局的百分比）修复布局的外部块元素，并且在内部元素上我通常尽可能设置百分比。

有些元素根本无法使用百分比或 em 来设计样式，尤其是来自不理解这些原则的图形设计师的更奇特的东西。

例如：如果您的网站上有一个简单样式的栏目，您可以轻松地将其宽度设置为百分比，但如果它的背景图片具有特定宽度且未设计缩放请记住，它只有固定宽度才看起来不错。在这种情况下，您必须确保页面的其余部分正确占据剩余宽度。

请注意，您可以将像素与百分比一起使用。
例如，这是我最新的网络应用程序之一的片段：

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

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

对于固定宽度布局，像素值就可以了。如果设计师给你一张 Photoshop 图像，其中包含非常奇特的东西，甚至考虑如何调整大小都非常复杂，那么你绝对应该这样做。

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

某些布局（例如，想象一下 StackOverflow 会占用所有空间）在宽度为例如 的情况下看起来会非常难看。 1920 像素 - 线宽非常高，阅读起来非常不方便。
这就是 max-width 的用途。即使在某些动态布局中，您也必须限制网站的最大宽度，以最大限度地提高可用性和可读性。

并且还要考虑较小的屏幕。
确实，已经没有人使用 800×600 的桌面了，但许多人使用分辨率更小的移动设备浏览网页。
这就是 min-width 的用途：使动态扩展的布局在较小的分辨率上看起来不那么拥挤。

我希望这有帮助。

编辑：

Smashing Book对此主题有一些非常好的想法。

编辑 2：

我不希望我的帖子听起来像是我希望您对访问者强制执行基于像素的大小调整。
（显然，评论中的一些人以这种方式误解了我。）

澄清一下：

我相信理想的布局是能够很好地适应任何可能的分辨率或设置的布局。
然而，我们不可能总是把每件事都做得完美。时间/资源和目标受众是确定您的网站是否需要高级功能的关键。

我建议您针对给定的工作使用正确的东西。

如果您正在开发一个网站，其中有很大比例的访问者需要对该网站进行更高级的调整，那么这可能是非常值得的它。
（当然，有时我们这样做只是为了让自己有一种以正确的方式做事的感觉，但这并不总是一个经济上合理的决定。）

不过，您应该对它将是什么样的网站进行适当的研究，在决定布局之前，先确定谁将是访客，以及诸如此类的事情，以及是否值得花时间让它们变得流畅或更动态。

Answer 3

字体大小

我认为您必须首先了解在 CSS 中处理像素时存在的问题：

• 旧版浏览器中的缩放功能已损坏。例如，IE6 和 IE7 缩放时不会调整文本大小。行高也可能很奇怪。这些问题在现代浏览器中不存在，但它们是许多人回避使用像素作为字体大小的原因。
• 如果您以像素为单位指定字体大小，每个人都会看到相同大小的文本。浏览器的默认段落大小为 16 像素，因此如果您仅使用 em 和其他相对大小，您将尊重更改此设置的用户的决定。这对于文本较多的网站尤其重要，尤其是在有更多老用户的情况下。另一方面，如果网站的设计很重要，我认为使用 px 来指定字体大小而不破坏可用性是可能且合理的。

最后，你需要自己做出决定，这确实取决于具体情况，但我认为以像素为单位指定字体大小是可以的。

顺便说一句，当使用 em 指定字体大小时，将 body 设置为 font-size 是一个好主意： 62.5%。这意味着基本字体大小为 10px，因此 1em 为 10px，1.6em 为 16px 等等，使得在使用 em 进行设计时更容易以像素为单位进行思考。我仍然觉得这样工作很令人沮丧，尤其是当 ems 的值级联时。有一些非常方便的网站，例如 PXtoEM.com 可以帮助解决此问题。

布局问题

屏幕是基于像素的布局，因此像素对于许多事情来说是一个直观的选择。这里的主要问题是不同的用户有不同的屏幕尺寸。正如其他人指出的那样，使用以像素为单位的 min-width 和 max-width 以及以百分比为单位的 width 是尊重尺寸的有用方法屏幕的宽度，同时防止您的网站在非常小和非常大的窗口上被不合理地挤压或拉伸。

但是，我通常会避免这种方法，而倾向于使用 CSS 媒体查询。然后，您可以使用固定宽度的块，并随着屏幕尺寸的增加使布局更宽（除其他外）。然而，CSS 媒体查询与所有酷炫的 Web 技术一样，都缺乏浏览器支持。最值得注意的是，IE8 及更早版本不支持它们，尽管有 JavaScript 修复。另一方面，iPhone 和其他手持设备确实支持它们，如果您希望您的网站在这些设备上看起来不错，我强烈推荐它们。

我认为固定宽度网格很好。固定宽度网格系统，例如 960 网格系统
本身就足够受欢迎，而且还有很多其他网站具有固定宽度，我怀疑如果您这样做，您会听到很多抱怨。没有大屏幕的手持设备是一个问题，但这就是应该使用 CSS 媒体查询的地方，因此可以以像素为单位指定所有内容，并使您的网站在桌面和其他设备上看起来很漂亮iPhone。

结论

最终，一切都取决于您的用户是谁、您需要支持什么以及您希望网站的外观，但是在 CSS 中使用像素本身并没有什么问题。

Answer 4

这取决于你的造型。例如，对于列，宽度可能应该取决于文本大小，以确保它在多种分辨率/屏幕上看起来最佳。如果您想将页面分为两部分，则应该使用百分比。但如果您希望这两个部分之间有 1 像素的边框（与分辨率无关），请使用像素。

Answer 5

基本上，这取决于谁雇用您以及您作品的受众。
出于机构目的（内容应优先于形状，例如政府项目），您最好使用 .em 或 %，它们更难控制，但在可访问性方面它们确实对用户友好。

如果我们谈论企业网站（其中形状是交易），像素将是一个更准确的工具，可以满足您的客户对其品牌的期望。
当巧妙地完成时，液体界面（％，.em）总是一个好东西，但不要忘记在极端条件下检查您的设计并确保它是稳定的。

如果您使用像素，您将完全控制网站的最终外观，但您将不得不假设某些用户无法有效地使用它。

最好的选择：与其设计一个兼容所有平台的网站（这将导致设计的多缺陷），不如建议您的客户使用适合每种需求的特殊版本的网站，这对设计师来说是更好的做法和更好的业务。 ..

Answer 6

我想说的是，如果可能的话，除了某些情况之外，避免使用它。

例如，对于细边框，只需指定 1px 即可。

对于 max- 和 min- 样式属性也是可以的。但如果可能的话，将非最大/最小属性设置为百分比。

Answer 7

这确实是一个好问题，我之前已经问过很多次了。我不是一名铁杆网页设计师（我更倾向于开发方面），我通常会询问与我一起工作的设计师的意见，以下是我所提炼的内容：

使用百分比与像素来调整元素的大小等等确实是个人喜好或每个具体情况的要求问题。如果您需要它可以缩放，或者它可以很好地缩放，请使用百分比。如果没有，请使用像素。这里的人们使用了页面中主要列的示例，这些列可能需要流畅，但边框很可能需要像素测量的精度。

显然，图像大小与其分辨率和像素单位密切相关，因此在这种情况下我总是使用它们。

然而，使用 em 大小调整与像素甚至点大小调整文本的大小完全不同。与我一起工作的大多数人都有一个字体大小的基本重置样式，这将 1em 的大小缩小到大约 12px。然后，他们在其他地方（或尽可能接近其他地方）使用 em 来调整文本元素、表单控件等的大小。这也是我现在的操作方式，因为它似乎可以在台式机和笔记本电脑上的各种浏览器、操作系统和 DPI 上运行良好。但我不能保证移动设备。

不过，可访问性是关键 - 如果您需要为残疾人士提供一些可用的东西，或者需要在各种开箱即用的设备上工作，即使是您可能认为过时的东西，那么扩展将是一个要求。将其构建到您的模型中，以便从一开始就设计网站，您可能会意识到在这种情况下甚至不需要绝对像素大小。

例如，一个艺术性很强的设计可能会以单一的规模进行设计，但针对残疾用户的新教育网站将必须在各种情况下工作。

请记住，W3C 将各种大小调整和缩放方法纳入其规范中是有原因的 - 灵活性。做任何最适合并且对你的受众有效的事情（正如穆斯塔德之前所说的）。

Answer 8

我不是 css/html 专家，但我使用的惯例是使用像素作为外部容器，使用百分比作为内部对象。

我对审查我的布局的人的另一个经验法则是“三像素规则”。在每个浏览器中，所有内容都完全一致的情况很少见。我们一致认为，将任何东西移动三个像素或更少，所付出的努力胜过所带来的好处。

Answer 9

默认做正确的事。如果用户在禁用 javascript 且没有偏好 cookie 的情况下访问您的网站，您应该为他们提供一个尽可能实用且易于访问的网页。

您的默认样式表不应该对浏览器窗口进行任何假设，并且仍然呈现一个功能页面，无论多么丑陋，分辨率低至 320x320，尺寸无上限。如果摄影保真度如此重要以至于您不能信任浏览器缩放（有时确实如此），那么您应该对封装固定大小图像的元素使用像素测量（至少是最小值），以确保您不会最终得到重要的事情被掩盖了。指定最小宽度和百分比应该可以为您提供所需的控制，同时为用户提供他们所需的可访问性。即使现在可访问性不是问题，但如果网站成功的话，那也是以后的事了。

当您确实了解浏览器窗口的更多信息时，如果保留设计的重要性证明增加的工作是合理的，那么在备用样式表中使用固定宽度是可以的。

Answer 10

如果您的目标是固定大小，那么像素就可以了。但是，如果您希望布局在各种分辨率/屏幕尺寸上看起来都不错，那么您应该坚持使用更相对的度量，例如百分比。大多数人的目标是后者。

Answer 11

如果这就是取悦您的客户所需要的，那就可以了。大多数时候，您无法仅用百分比来平衡不同屏幕尺寸的空间量。 CSS3 媒体查询在这里有所帮助，但采用仍然存在问题。

Answer 12

在大多数情况下我更喜欢像素。
例如 - 内容区域的默认宽度：960px。
在“1024”中就可以了，屏幕两侧都有小的可用空间。在那里放一些渐变或背景。在“1280”或“1440”或“1680”，或其他什么 - 差距会越来越大，但看起来不错。
是的，对于 800 - 这个网站会很难看。但谁在乎呢？每个主要玩家都放弃了对 800 的支持。有这个解决方案的人太少了。

有很多不同的站点，但 %% 将是更好的解决方案。

Answer 13

屏幕的组成部分是像素。使用固定的像素大小是不会出错的。正如其他发帖者所提到的，您还可以使用百分比或“em”作为可扩展的替代品。