在CSS中使用像素单位是否有害？

Question

在CSS中使用像素单位是否有害？

csspixelscreen-resolutionresolution-independence

85

在CSS中，使用像素数代替百分比是否会影响兼容性？对于较低的分辨率如何处理？在1到100的范围内使用它们是否可以？

- loya

13个回答

41

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

像素并不那么糟糕，我也经常使用它们。(有时甚至用于字体大小。)
通常我会通过给定的尺寸来修正布局的外部块元素 (在固定宽度布局中使用像素，在流动布局中使用百分比)，在内部元素上尽可能使用百分比。

有一些元素无法使用百分比或 em 进行样式设置，特别是那些来自图形设计师、不理解这种原则的花哨元素。

例如：如果您的网站上有一列带有简单样式的内容，则可以轻松将其宽度设置为百分比，但如果它具有具有特定宽度的背景图片且未考虑缩放设计，则只能使用固定宽度才能获得最佳效果。在这种情况下，您需要确保页面的其余部分正确占据剩余宽度。

请注意，您可以同时使用像素和百分比。
例如，以下是我最新的 Web 应用程序之一中的代码片段：

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

选择哪种方法也取决于您想要实现什么样的设计或布局。
对于固定宽度布局，像素值可以使用。如果设计人员给您一个包含非常复杂的元素以至于甚至难以考虑如何调整大小的Photoshop图像，您应该绝对选择这个方法。
如果您的布局需要是动态的，则应使用百分比来确保它随着分辨率变化而扩展，并且您可以使用上面的代码段在其他情况下使其看起来更好。
某些布局（例如，假设StackOverflow占用了所有空间）在宽度为1920像素等的情况下会非常丑陋-行宽将非常高，阅读时将非常不方便。
这就是max-width的作用所在。即使在一些动态布局中，您也必须限制您网站的最大宽度以最大化可用性和易读性。
还要考虑较小的屏幕。
尽管已经没有人再使用800×600的桌面显示器，但许多人使用具有更小分辨率的移动设备浏览网页。
这就是min-width的作用：在较小的分辨率上使您动态扩展的布局看起来不那么拥挤。
希望这可以帮到您。
编辑：
Smashing Book对此问题有一些非常好的想法。
编辑2：
我并不是说您应该强制基于像素的大小调整访问者的页面大小。（显然，某些评论中的人误解了我的意思。）
为了澄清：
我认为理想的布局是可以适应任何可能的分辨率或设置。
但是，我们并不总是能够做到完美。时间/资源和目标受众是决定您的网站是否需要使用高级功能的关键。
我建议您根据实际情况选择正确的方法。
如果您正在开发一个将有相当比例的访客需要更高级的页面调整的网站，则这可能非常值得尝试。
（当然，有时我们只是为了自己感觉做事情的方式是正确的，但这并不总是一个财务上可行的决策。）
不过，在决定布局和是否值得投入时间使其流动或更动态之前，您应该进行适当的研究，了解将是什么样的网站、谁将是访问者等相关信息。

- Venemo

5

按像素大小调整物品的尺寸会影响很多用户。大多数人的屏幕宽度为1024或更多 - 但是他们的浏览器窗口有多宽呢？如果它与其他四个窗口一起打开，他们只想让它宽400像素怎么办？另外 - 如果他们的视力不太好，并且在30英寸的显示器上使用24或32pt字体呢？那么你的最大宽度就越限制了他们。 - Alex Feinman

“线条宽度太高，阅读非常不便。”这可以通过使用相对大小（例如ems）来解决，这比强制用户使用像素大小要好得多。 - rmeador

4

@Alex，@rmeador - 这完全取决于网站的目标受众以及你愿意花费多少时间。当然，一个理想的布局应该能够适应所有可能的设置和分辨率，但是如果99%的用户不需要它，那么这就是一种浪费精力和金钱的行为。我并不是说你们说的有错，但这并不总是值得努力去做的。 - Venemo

我看现在em字号已经过时了，px字号回来了。太好了。 - James Westgate

1

@Alex Feinman - 如果浏览器窗口宽度为400像素，用户可以将其展开到全屏。如果出现水平滚动条，几乎每个人都会这样做。顺便说一下，stackoverflow的固定宽度为960px。许多Google页面也有固定宽度。 - Davinel

@Davinel - 没错。如果使用得当，固定宽度是没有问题的。 - Venemo

12

老版本浏览器缩放有问题。例如，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是一种有用的方式，可以尊重屏幕的大小，同时防止您的网站在非常小的和非常大的窗口上被 unreasonable squished 或者 stretched。

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

我认为固定宽度网格是可以接受的。像960 Grid System这样的固定宽度网格系统已经非常流行，而且有许多其他具有固定宽度的网站，所以如果您这样做，我怀疑您会听到很多抱怨。没有大屏幕的手持设备是一个问题，但这就是应该使用CSS媒体查询的地方，因此可以在像素中指定所有内容，使您的网站在桌面和iPhone上看起来漂亮。

结论

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

- David Johnstone

2

只是想指出，CSS中的“像素”并不是显示器像素。 - Unicorn

4

这取决于你要样式化的内容。例如对于列，宽度可能应该根据文本大小而定，以确保在多个分辨率/屏幕上看起来最佳。如果您想将页面分为两部分，则应使用百分比。但是，如果您希望在这两个部分之间有1像素的边框，无论分辨率如何，都应使用像素。

- Ruud

4

基本上这取决于雇主和你的工作受众。对于机构目的（其中内容应优先于形式，如政府项目），最好使用.em或％，它们难以控制，但在可访问性方面非常用户友好。

如果我们谈论企业网站（形状是关键），像素将是实现客户品牌期望的更准确的工具。当明智地完成时，液态界面（％，.em）总是很棒的东西，但不要忘记在极端条件下检查您的设计并确保其稳定。

如果您使用像素，则可以完全控制站点的最终外观，但您必须承担某些用户无法有效操作的不可能性。

最佳选择：而不是设计适用于所有平台的网站（这将导致多缺陷设计），建议您的客户针对每个需求提供特殊版本的网站，这是更好的做法，也是设计师更好的业务...

- Moustard

1

+1 对于提到这取决于您的客户和网站目标受众的观点表示认同。 - Venemo

2

如果可能的话，我会建议避免使用它，除非是某些特定情况。

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

此外，在max-和min-样式属性中使用也可以。但是，如果可能的话，请将非最大/最小属性设置为百分比。

- Earlz

1

+1 提到“max-”和“min-”属性。 - Venemo

2

这真的是一个很好的问题，我以前也问过很多次。作为一个非核心网页设计师（我更多地从事开发方面），我通常会询问我合作的设计师们的意见，以下是我总结出来的：

使用百分比和像素来调整元素大小等等，实际上是个人品味或每种特定情况下的需求。如果需要进行缩放，或者它将很好地进行缩放，请使用百分比。如果不需要，则使用像素。这里的人们已经使用了页面中主要列可能需要是流体的例子，但边框可能需要像素测量的精度。

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

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

然而，可访问性是关键——如果您需要使某些东西适用于残疾人或在各种设备上工作，即使您可能认为这是旧的，那么缩放也将是一种要求。从一开始就将其构建到设计网站的模型中，您可能会意识到在这种情况下甚至不需要绝对像素大小。

例如，一个艺术密集型设计可能会被设计为单一比例，但新的残疾用户教育网站将不得不在各种情况下工作。

只需记住，W3C在其规范中提供了各种调整大小和缩放的方法-灵活性。做最适合并且适合您的受众群体的事情（正如Moustard之前所说）。

- Geoff Adams

1

我不是一个CSS/HTML专家，但我通常使用像素来设置外部容器的大小，而使用百分比来设置内部对象的大小。

另一个我在布局中遵循的经验法则是“三个像素规则”。几乎不可能在所有浏览器中完全对齐。我们一致认为，移动小于或等于三个像素的任何元素所需的努力超过了它所带来的好处。

- Stevko

+1 是“外部容器使用像素，内部对象使用百分比”的最佳实践。但是，这仅适用于固定宽度布局。 - Venemo

1

默认情况下要做正确的事情。如果用户禁用了JavaScript并且没有设置首选项cookie，则应向他们提供尽可能功能和可访问性的网页。

您的默认样式表不应对浏览器窗口做任何假设，仍应呈现出一个功能齐全但难看的页面，分辨率最低为320x320，最高为无限大。如果照片保真度非常重要，以至于您不能信任浏览器缩放（有时确实如此），那么您应该使用像素测量（至少是最小值）来包含固定大小图像的元素，以确保您不会覆盖重要内容。指定百分比和最小宽度应该能够给您所需的控制，同时为您的用户提供所需的可访问性。即使现在可访问性不是问题，如果网站成功了，以后也会成为问题。

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

- Chris

0

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

- Daniel DiPaolo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Feinman · Accepted Answer

所有测量单位都有它们各自的用途：

使用像素（pixels）来进行基于像素的事物，比如边框。你可能不想要一条宽度为1.3422像素的边框。
使用文本为中心的度量（em、ex）来进行基于文本的事物，比如内容区域、标签和输入框。这是一种简单的方式，可以确保你有足够的空间来容纳一定长度和宽度的文本。
使用百分比（percent）来进行基于窗口的事物，比如列。

当然也有例外情况。例如，你可能想要指定一个最小的列宽度，以像素为单位。但如果遵循以上规则，你的页面会有良好的缩放效果。始终在页面上缩放查看，以检查它们在不同字体大小和浏览器形状下的效果--不要在之后感到惊讶。