83

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

4

13 回答 13

41

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

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

有些元素根本无法用百分比或ems 来设置样式，尤其是来自不了解这些原则的图形设计师的更花哨的东西。

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

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

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

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

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

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

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

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

我希望这有帮助。

编辑：

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

编辑2：

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

要清除它：

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

我建议你为给定的工作使用正确的东西。

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

尽管如此，在决定布局之前，您应该对它的网站类型、访问者以及此类内容进行适当的研究，以及是否值得花时间让它们变得流畅或更动态。

于 2010-05-26T18:03:12.810 回答
41

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

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

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

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

当然，也有例外。例如，您可能希望以像素为单位指定最小列宽。但是按照上面的操作，您的页面会很好地扩展。始终放大和缩小您的页面，以查看它们如何使用不同的字体大小和浏览器形状 - 以后不要感到惊讶。

于 2010-05-26T19:52:47.120 回答
12

字体大小

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

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

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

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

布局问题

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

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

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

结论

最终，一切都取决于您的用户是谁、您需要支持什么以及您希望您的网站看起来像什么，但在 CSS 中使用像素本质上并没有错。

于 2010-09-17T07:25:11.187 回答
4

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

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

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

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

于 2010-05-26T20:50:39.353 回答
4

这取决于你的造型。例如，对于列，宽度可能应该取决于文本大小，以确保它在多个分辨率/屏幕上看起来是最佳的。如果要将页面分为两部分，则应使用百分比。但是如果你想在这两个部分之间有一个 1px 的边界，独立于分辨率，使用像素。

于 2010-05-26T18:06:09.790 回答
2

如果可能的话，我会说避免它，除非在某些情况下。

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

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

于 2010-05-26T18:16:49.590 回答
2

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

使用百分比与像素来调整元素大小等实际上是个人品味或每个特定情况下的要求的问题。如果您需要它进行扩展，或者它会很好地扩展，请使用百分比。如果没有，请使用像素。这里的人们使用了页面中主要列的示例，可能需要流畅，但边界可能需要像素测量的精度。

显然，调整图像大小与它们的分辨率和像素单位非常相关，所以我总是在这种情况下使用它们。

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

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

例如，一个重艺术的设计可能会以单一规模设计，但新的残疾用户教育网站将不得不在各种情况下工作。

请记住，W3C 将各种用于调整大小和缩放的方法放入其规范中是有原因的——灵活性。做任何最适合你的听众的事情（正如 Moustard 之前所说的）。

于 2010-05-26T23:45:34.393 回答
1

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

我与任何审查我的布局的人的另一个经验法则是三像素规则。很少有东西会在每个浏览器中完全对齐。我们已经同意，移动任何 3 像素或更少像素所带来的好处大于努力。

于 2010-05-26T18:17:35.967 回答
1

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

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

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

于 2010-05-27T13:45:34.813 回答
0

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

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

于 2010-05-26T21:18:54.093 回答
0

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

于 2010-05-26T18:02:09.957 回答
0

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

于 2010-05-26T18:11:55.457 回答
-1

屏幕的构建块是像素。固定像素大小不会出错。正如其他海报所提到的，您还可以使用百分比或“em”作为可扩展的替代品。

于 2010-05-26T19:37:09.023 回答