在CSS中处理像素是不是很糟糕?

在CSS中使用像素数而不是百分比来说兼容性差吗? 如何降低分辨率? 可以在1-100的范围内使用它们吗?

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

像素不是那么糟糕,我大多也使用它们。 (有时甚至字体大小。)
我通常通过给定的尺寸(固定宽度布局的像素和stream体布局的百分比)来固定布局的外部块元素,并且在内部元素上我通常会尽可能地设置百分比。

有些元素不能用百分比或em ,特别是来自graphicsdevise人员的更多花哨的东西,他们不理解这些原则。

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

请注意,您可以一起使用百分比的像素。
例如,这是我最新的networking应用程序的一个片段:

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

select也取决于您想要达到的devise或布局。

对于一个固定宽度的布局,像素值是好的。 如果一个devise师给你一个Photoshop图像,其中包含真正花哨的东西,这将是非常复杂的,甚至想想如何resize,你一定要去这个。

如果你的布局需要是dynamic的 ,你应该使用百分比来确保它随着分辨率的改变而扩展,并且你可以使用上面的代码片段使它看起来更好,否则它会显得疯狂。

一些布局(例如,想象如果StackOverflow将占用所有的空间)会看起来非常难看,例如宽度。 1920像素 – 线条宽度会非常高,以至于读起来会非常不方便。
这是max-width是什么。 即使在某些dynamic布局中,您也必须限制网站的最大宽度,以最大限度地提高可用性和可读性。

并考虑到较小的屏幕。
确实,没有人再使用800×600桌面,但许多人使用分辨率更小的移动设备浏览网页。
这是min-width原因:使您的dynamic扩展布局看起来不那么拥挤在较小的resoultions。

我希望这有帮助。

编辑:

粉碎的书有关于这个问题的一些非常好的想法。

编辑2:

我不希望我的文章听起来像我想要你强制访问者的基于像素的大小。
(显然,有些人在评论中误解了我的意思。)

要清除它:

我相信,理想的布局是适应任何可能的解决scheme或设置。
但是,我们不能总是完美地做一切事情。 时间/资源和目标受众是决定您的网站是否需要高级function的关键。

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

如果您正在开发一个网站,将有相当比例的访问者需要更高级的网站调整,这可能是非常值得的。
(当然,有时我们只是为了让自己有正确的方式来做事情的感觉,但并不总是一个经济上合理的决定。)

尽pipe如此,在决定布局之前,还是应该对什么types的网站进行适当的研究,谁将成为访问者等等,以及是否值得花时间使其变得stream畅或者更具活力。

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

  • 像素为基础的东西 ,像边界使用像素 。 你可能不想要一个最终为1.3422像素宽的边框。

  • 对于基于文本的内容使用以文本为中心的度量(em,ex) ,如内容区域,标签和input框。 这是一个简单的方法,以确保您有一定的长度和宽度的文本的空间。

  • 使用基于窗口的东西百分比 ,如列。

当然也有例外。 例如,您可能想要以像素为单位指定最小列宽。 但按照上述和你的网页将扩展好。 总是放大和缩小您的网页,看看他们如何使用不同的字体大小和浏览器形状 – 稍后不要感到惊讶。

字体大小

我认为你必须先了解在CSS中处理像素的问题

  • 放大旧版浏览器已损坏。 例如, IE6和IE7在缩放时不会调整文本大小 。 线条高度也会变得古怪。 这些问题在现代浏览器中并不存在,但它们是许多人避开使用字体大小的像素的原因。
  • 如果您指定以像素为单位的字体大小,则每个人都将看到相同大小的文字 。 对于段落,浏览器的默认大小为16px,所以如果您只使用em和其他相对大小,您将尊重更改用户的决定 。 这在文字较重的网站上尤其重要,特别是如果有更多的老用户。 另一方面,如果站点的devise很重要,我认为使用px指定字体大小而不破坏可用性是可能的和合理的。

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

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

布局问题

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

但是,我通常会避免使用这种方法来支持CSS媒体查询 。 然后,您可以使用固定宽度的块,并随着屏幕尺寸的增加而使布局变宽(等等)。 然而,CSS媒体查询,像所有酷的networking技术,都缺乏浏览器支持。 最值得注意的是,IE8和更早版本不支持他们,虽然有JavaScript修复。 另一方面,iPhone和其他手持设备支持他们,如果你想让你的网站在这些设备上看起来不错,我会强烈推荐他们。

我认为固定宽度的网格很好 。 像960网格系统这样的固定宽度的网格系统本身是非常stream行的,而且还有很多其他网站的宽度是固定的,所以我怀疑如果你这样做的话,你会听到很多的抱怨。 没有大屏幕的手持设备是一个问题,但这是应该使用CSS媒体查询的地方,所以可以用像素来指定所有东西,并使您的网站在桌面和iPhone上看起来很漂亮。

结论

最终,一切都取决于你的用户是谁,你需要支持什么,你想让你的网站看起来像什么 ,但是在CSS中使用像素没有任何内在的错误

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

基本上这取决于谁雇用你,因此你的工作的观众。 对于机构目的(内容应该优先于forms,比如政府项目),你最好使用.em或%,他们很难控制,但是在可访问性方面他们真的是用户友好的。

如果我们谈论法人网站(哪里是交易的forms)像素将是一个更准确的工具,以满足您的客户对他的品牌的期望。 一个液体界面(%,.em)总是一个很好的东西,但是不要忘了在极端条件下检查你的devise,并确保它是稳定的。

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

最好的select:而不是devise一个网站兼容所有平台(什么会导致一个多缺陷devise)build议您的客户特殊版本的网站适应每个需求,什么是一个更好的做法和一个devise师更好的业务。 ..

如果可能,除了在某些情况下,我会说避免它。

例如,对于一个薄边框,可以指定1px。

对于max-min-风格属性也是可以的。 但如果可能的话,使非最大/最小的属性是一个百分比。

这是我以前曾问过很多次的好问题。 不是一个铁杆的网页devise师(我更多的是在开发方面)我通常会问我所从事的devise师关于他们的意见,这里是我已经蒸馏:

使用百分比与像素来确定元素的大小等等的确是个人品味或每个特定情况下的要求。 如果您需要扩展,或者扩展性好,请使用百分比。 如果不是,则使用像素。 这里的人们已经使用了一个页面中的主要列的例子,可能需要stream动,但是边界可能需要像素测量的精度。

很明显,图像的大小与分辨率和像素单位有很大关系,所以在这种情况下我总是使用它们。

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

无障碍是关键 – 如果你需要为残疾人士提供一些可用的东西,或者在各种各样的设备上工作,甚至是你可能认为老的东西,那么缩放将是一个需求。 将其构build到您的模型中,从一开始就devise网站,您可能会意识到绝对像素大小在这种情况下甚至不需要。

例如,艺术devise可能会被devise成一个单一的规模,但新的残疾人教育网站将不得不在各种情况下工作。

请记住,W3C提供了各种方法来确定尺寸和缩放规格,这是因为灵活性。 做任何最适合你的听众的作品(正如Moustard先前所说)。

我不是一个CSS / HTML专家,但我使用的约定是使用像素的外部容器和百分比的内部对象。

另一个经验法则是我有任何人审查我的布局是三像素规则 。 所有的东西都会在每个浏览器中排列,这是很less见的。 我们已经同意这个努力超过了移动任何三像素或更less的好处。

做默认的正确的事情。 如果用户访问您的网站与JavaScript禁用和没有偏好的cookie,你应该为他们提供一个尽可能function和访问的网页。

您的默认样式表应该对浏览器窗口不做任何假设,并且仍然渲染一个function性页面,然而这个页面可怕的是,降至320×320的分辨率,并且尺寸不受限制。 如果摄影保真度如此重要,以至于你不能相信浏览器的缩放比例,有时甚至是这样,那么对于封装固定尺寸图像的元素,你应该使用像素测量值(至less是最小值),以确保你不会以重要的事情被掩盖了。 指定最小宽度和百分比应该为您提供所需的控件,同时为用户提供所需的可访问性。 即使可访问性现在不是问题,但是如果网站成功了,它将会在以后。

当你对浏览器窗口有了更多的了解的时候,如果保留devise的重要性certificate了所添加的工作是正确的,那么在其他样式表中使用固定的宽度也是可以的。

如果你的目标是一个固定的大小,那么像素是好的。 但是,如果你想让你的布局在各种分辨率/屏幕尺寸上看起来不错,那么你应该坚持更多的相对措施,如百分比。 大多数人都瞄准后者。

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

在大多数情况下我更喜欢像素。 例如 – 内容的默认宽度是:960px。 在“1024”中就可以了,屏幕两边都有小的空闲空间。 在那里放一些渐变或背景。 在“1280”,“1440”或“1680”等方面,差距会越来越大,但看起来不错。 是的,为800 – 这个网站将是丑陋的。 但谁在乎? 每个主要玩家都下降了800的支持。这个决议的人太less了。

有很多不同的网站,%%将是更好的解决scheme,虽然。

屏幕的构build块是像素。 固定像素尺寸不能出错。 正如其他海报所提到的,你也可以使用百分比或“em”作为可扩展的替代品。