在CSS中使用像素是否不好?[关闭]


83

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

Answers:


40

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

像素还不错,我也经常使用它们。(有时甚至是字体大小。)
我通常以给定的大小(固定宽度布局的像素,流畅布局的百分比)固定布局的外部块元素,而在内部元素上,我通常会尽可能设置百分比。

有些元素根本无法用百分比或ems进行样式设置,尤其是来自于不了解此类原理的图形设计师的花哨东西。

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

请注意,您可以将像素与百分比一起使用。
例如,这是我最新的一个Web应用程序的摘录:

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

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

对于固定宽度的布局,像素值很好。如果设计师为您提供的Photoshop图像包含真正精美的东西,甚至考虑如何调整大小都会非常复杂,那么您绝对应该这样做。

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

某些布局(例如,假设StackOverflow是否会占用所有空间)在例如的宽度上看起来很难看。1920像素-线宽太高了以至于阅读起来非常不方便。
max-width是为了什么。即使在某些动态布局中,您也必须限制站点的最大宽度,以最大程度地提高可用性和可读性。

并且还要考虑较小的屏幕。
确实没有人使用800×600桌面,但是许多人使用分辨率甚至更低的移动设备浏览Web。
这是min-width为了:使动态扩展的布局在较小的布局上不显得拥挤。

我希望这有帮助。

编辑:

粉碎书》对此主题有一些很好的想法。

编辑2:

我不希望我的帖子听起来像我希望您对访问者施加基于像素的大小调整。
(显然,评论中的某些人以这种方式误解了我。)

要清除它:

我认为理想的布局可以很好地适应任何可能的分辨率或设置。
但是,我们不能总是将所有事情做到完美。时间/资源和目标受众是确定您的站点是否需要该高级功能的关键。

我建议您为给定的工作使用正确的方法。

如果您正在开发一个站点,该站点将有很大一部分访问者需要对该站点进行更高级的调整,那么这是值得的。
(当然,有时我们只是为了自己做,以感觉有正确的做事的感觉,但这并不总是一个合理的财务决定。)

不过,在决定布局之前,您应该对将要成为什么样的网站,访问者是谁以及类似的东西进行适当的研究,以及是否值得花时间使它们变得流畅或更具活力。


5
通过像素软管为许多用户确定尺寸。大多数人的屏幕宽度为1024或更大-但是他们的浏览器窗口有多宽?如果它与其他四个窗口同时打开,并且他们只希望其宽度为400px,该怎么办?或者-如果有什么自己的视野不是非常好,他们有30"显示器上使用24点或32点的字体那么你的最大宽度overconstrains他们?
亚历费恩曼

“线宽如此之高,以至于阅读起来极为不便” –可以通过使用相对大小(例如ems)来解决,这比将像素大小强加给用户要好得多。
rmeador

4
@ Alex,@ rmeador-这完全取决于网站的目标受众是什么,以及您想花多少时间在网站上。当然,理想的布局是可以根据每种可能的设置和分辨率进行正确调整的布局,但是如果您有99%的用户不需要它,那将是浪费精力和金钱。我并不是说您的说法是错误的,但这并不总是值得付出的努力。
Venemo

我看到ems的字体大小现在已经用完,px的了。
詹姆斯·韦斯特盖特

1
@Alex Feinman-具有400px宽度的浏览器窗口的人可以将其扩展到全屏。如果看到水平滚动,几乎每个人会这样做。btw-stackoverflow具有固定宽度960px。许多Google页面也具有固定宽度。
Davinel

37

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

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

  • 对基于文本的内容(例如内容区域,标签和输入框)使用以文本为中心的度量(em,ex)。这是确保您可以容纳一定长度和宽度的文本的简便方法。

  • 对基于窗口的内容(例如列)使用百分比

当然也有例外。例如,您可能要指定最小列宽(以像素为单位)。但是,请遵循上述内容,您的页面会很好地缩放。始终放大和缩小页面以查看它们如何使用不同的字体大小和浏览器形状-以后不要惊讶。


1
这是正确的答案。如果您从一开始就考虑可扩展性,那么将来的生活将会更加轻松。Venemo建议不要将液体宽度视为高级功能或费时的方法。更不用说以px设置字体大小了(从不这样做-从来没有)。
布赖恩·唐宁

@Bryan-某些设计在设计时并未考虑到可扩展性。例如。如果您从设计师那里收到了一个绝对不打算缩放的psd文件,为什么要使其具有可扩展性?
Venemo

2
@Venemo,这是一个挑战。如果您要从图形艺术家那里获得“扔掉篱笆”的设计,也许您应该重新检查您的工作流程,以便可以更好地在网站外观上进行协作。您也许还可以创造性地填充设计。HTML5中的图像边框通过允许宽度可变的图形边框连接固定大小的图形元素,也希望解决许多此类问题。
亚历克斯·费曼

@ Alex,+ 1,我同意。但是,有些客户仍然不需要它,甚至根本不在乎它。在这种情况下,这是浪费时间和金钱。也同意HTML5。不幸的是,如果您担心旧版浏览器或IE,我不建议过多使用它。
Venemo

@Venemo-公平点。我刚刚看过该DVD,它在设计可访问的可伸缩布局(以及如何说服客户应该使用它们)方面有很多优点。
布莱恩·唐宁

12

字号

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

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

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

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

布局问题

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

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

我认为固定宽度的网格很好。诸如960网格系统之类的固定宽度网格系统 本身就已经足够流行,而且还有许多其他站点具有固定宽度,以至于我怀疑如果这样做,您会听到很多抱怨。没有大屏幕的手持设备是一个问题,但这是应该使用CSS媒体查询的地方,因此可以指定所有像素值,并使您的网站在台式机和iPhone上看起来漂亮。

结论

最终,一切都取决于您的用户身份,您需要支持的内容以及您希望网站的外观,但是在CSS中使用像素本质没有错


2
只是要指出,css的“像素”不是显示像素
Romeno

4

这取决于您的样式。例如,对于列,宽度可能应取决于文本大小,以确保在多种分辨率/屏幕上看起来最佳。如果要将页面分为两部分,则应使用百分比。但是,如果您希望这两个部分之间有1px的边框(与分辨率无关),请使用像素。


4

基本上,这取决于谁雇用您,进而取决于您的工作对象。出于机构目的(内容应优先于形状,例如政府项目),您最好使用.em或%,它们很难控制,但就可访问性而言,它们实际上是用户友好的。

如果我们谈论公司网站(最重要的是交易),像素将是满足您的客户对其品牌期望的更准确工具。精巧地使用液体界面(%,.em)总是好东西,但不要忘了在极端条件下检查设计并确保它会稳定。

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

最佳选择:与其设计一个与所有平台兼容的网站(这将导致多缺陷设计),不如为您的客户提供适合每个需求的特殊版本的网站,这对于设计师来说是一种更好的做法,也是一项更好的业务。 ..


1
+1表示它取决于您的客户和网站的目标受众。
Venemo

2

我想说,除非在某些情况下,否则请避免。

例如,对于细边框,可以只指定1px。

同样对于max-min-样式属性也可以。但是,如果可能的话,请使non-max / min属性为百分比。


1
+1为提及max-min-属性。
Venemo

2

这确实是一个好问题,我之前已经问过很多次了。我不是一名顽固的Web设计师(我更多地是在开发方面),我通常会向与我合作的设计师询问他们的意见,以下是我总结的内容:

使用百分比vs像素来确定元素大小等,实际上是个人喜好或每种特定情况下的要求的问题。如果您需要缩放比例,或者缩放比例很好,请使用百分比。如果没有,请使用像素。这里的人们使用了页面中主要列的示例,可能需要保持流畅,但是边框可能需要像素测量的精度。

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

但是,对文本使用em大小调整还是像素大小甚至点大小调整是完全不同的选择。与我合作的大多数人都对字体大小有基本的重置样式,这使1em的大小减小到约12px。然后,他们在其他任何地方(或尽可能靠近其他地方)使用em来调整文本元素,表单控件等的大小。我现在也是这样操作的,因为它似乎可以在台式机和笔记本电脑上的各种浏览器,操作系统和DPI上正常运行。我不能担保移动设备。

可访问性是关键-但是,如果您需要使残疾人可用的物品或开箱即用的各种设备,即使您可能认为陈旧的设备也需要扩展。将其构建到用于从头开始设计站点的模型中,您可能会意识到在这种情况下甚至不需要绝对像素大小。

例如,繁重的艺术设计可能会以单一比例进行设计,但是面向残障用户的新教育网站将不得不在各种情况下工作。

请记住,W3C出于各种原因(灵活性)而采用了各种方法来调整大小和缩放其规格。做最适合您的听众并且最适合您的听众的事情(正如穆斯塔德先前所说)。


1

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

与其他人一起查看我的布局时,我有另一个经验法则是“三像素法则”。很少有东西会完全排在每个浏览器中。我们已经同意,将任何东西移动到3像素或更少像素的好处大于付出的努力。


+1表示“外部容器的像素和内部对象的百分比”。尽管如此,这仅适用于固定宽度的布局。
Venemo

1

默认情况下,做正确的事。如果用户在禁用javascript且没有首选项cookie的情况下访问您的网站,则应向他们提供一个功能强大且可访问的网页。

您的默认样式表应该对浏览器窗口不做任何假设,并且仍然渲染功能页面,无论多么丑陋,分辨率都应低至320x320,并且尺寸应无限制。如果照片保真度是如此重要,以至于您不能相信浏览器的缩放比例,有时甚至是这样,那么对于封装固定大小图像的元素,应该使用像素测量(至少是最小值),以确保最终不会出现重要的事情被掩盖了。指定最小宽度以及百分比可以为您提供所需的控制,同时为用户提供所需的可访问性。即使现在可访问性不是问题,但如果站点成功,它将在以后。

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


0

如果您定位的是固定尺寸,则像素很好。但是,如果您希望布局在各种分辨率/屏幕尺寸下看起来都不错,那么您应该坚持使用百分比等相对度量。大多数人都针对后者。


0

没关系,如果这是取悦您的客户所需要的。大多数情况下,您无法仅以百分比来平衡各种屏幕尺寸的空间量。CSS3媒体查询在这里有帮助,但是采用仍然存在问题。


0

在大多数情况下,我更喜欢像素。例如-内容的默认宽度ares:960px。在“ 1024”中可以,屏幕两侧都有较小的可用空间。在此放置一些渐变或背景。在“ 1280”或“ 1440”或“ 1680”或类似的格式中-差距会越来越大,但看起来会很好。是的,只要800美元-这个网站将很难看。但谁在乎?每个主要参与者都放弃了对800的支持。拥有这个分辨率的人太少了。

有很多站点,但是%%是更好的解决方案。


我认为,由于移动设备的出现,对800px和更低宽度的支持应该会回来。但是,并非所有人都愿意花更多的精力使自己的网站在移动设备上看起来不错。
Venemo

@Venemo-我认为制作该网站的移动版本将是更好的解决方案。
Davinel

我有一个1680px的宽屏,但是经常并排有多个窗口,大约有800px的宽度。如果对于精通技术的用户来说,多个打开的窗口比不常见的话,我不会感到惊讶。这在某些网站上令人讨厌吗?是的,但是它比我尝试过的替代方法还要有用。垂直空间对于几乎所有东西似乎都至关重要。

-1

屏幕的组成部分是像素。固定像素大小不会出错。正如其他张贴者所提到的,您也可以使用百分比或“ em”作为可缩放替代项。


2
-1。网页的组成部分是文本和图形。是的,它们最终会转换为像素,但这一点无关紧要。
亚历克斯·费曼

@Alex-他不是在谈论网页的构建块,而是在谈论屏幕的构建块。
Venemo

@Alex是无关紧要的吗?再次阅读问题。“在兼容性方面,在CSS中使用像素数而不是百分比是否不好?较低的分辨率又如何?在1至100的范围内使用它们可以吗?”
sitebyjoe 2010年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.