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

Question

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

Answer 1

这是一个棘手的问题,因为答案主要取决于您的情况.

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

有些元素根本不能用百分比或ems 来设计,尤其是来自不理解这些原理的图形设计师的更多花哨的东西.

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

请注意,您可以同时使用百分比的像素.
例如,这是我最新的一个网络应用程序的片段:

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

选择还取决于您希望实现的设计或布局.

对于固定宽度布局,像素值很好.如果一个设计师给你一个Photoshop图像,其中包含非常奇特的东西,即使考虑它如何调整大小也会非常复杂,你绝对应该这样做.

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

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

并且还要考虑较小的屏幕.
确实,没有人再使用800×600台式机,但很多人使用分辨率更低的移动设备浏览网页.
这是min-width为了:使动态扩展的布局看起来不那么拥挤在较小的resoultions上.

我希望这有帮助.

编辑:

该碎书具有对上述一些非常好的想法.

编辑2:

我不希望我的帖子听起来像是我希望你强制对访问者进行基于像素的调整.
(显然,评论中的一些人以这种方式误解了我.)

清除它:

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

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

如果您正在开发一个网站,其中有相当比例的访问者需要对网站进行更高级的调整,那么这可能是值得的.
(当然,有时候我们只是为自己做这件事情的感觉,但并不总是做出经济上合理的决定.)

尽管如此,在决定布局之前,你应该对它将是什么类型的网站,谁将是访客以及这些东西进行适当的研究,以及是否值得花时间让它们变得流动或更具动态性.

Answer 2

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

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

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

• 将百分比用于基于窗口的事物,例如列.

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

Answer 3

字体大小

我认为您必须首先了解在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网格系统这样的固定宽度网格系统 本身就很受欢迎,还有很多其他网站都有固定的宽度,如果你这样做,我怀疑你会听到很多抱怨.没有大屏幕的手持设备是一个问题,但这是应该使用CSS媒体查询的地方,因此可以指定像素的所有内容,让您的网站在桌面和iPhone上看起来很漂亮.

结论

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

Answer 4

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