在CSS中使用像素数而不是百分比的兼容性方面是否不好？降低分辨率怎么样？可以在1-100范围内使用它们吗？
答案 0 :(得分：38)
这是一个棘手的问题，因为答案主要取决于你的情况。
像素并不是那么糟糕，我也大多使用它们。 （有时甚至是字体大小。）
我通常用给定的大小（具有固定宽度布局的像素和具有流体布局的百分比）修复布局的外部块元素，并且在内部元素上我通常尽可能地设置百分比。
有些元素根本无法使用百分比或em来设置样式，尤其是来自不了解此类原则的图形设计人员的更多花哨的东西。
例如：如果您的网站上有一个简单样式的列，您可以轻松地将其宽度设置为百分比，但如果它具有特定宽度的背景图像不是考虑到缩放设计，它只有固定宽度才好看。在这种情况下，您必须确保页面的其余部分正确占用剩余宽度。
请注意，您可以同时使用百分比的像素 例如，这是我最新的一个网络应用程序的片段：
min-width: 800px;
width: 80%;
max-width: 1500px;
选择还取决于您希望实现的设计或布局。
对于固定宽度布局，像素值很好。如果一个设计师给你一个包含非常花哨的东西的Photoshop图像，即使考虑如何调整它也会非常复杂，你绝对应该这样做。
如果你的布局需要动态，你应该使用百分比来确保它随着分辨率的变化而扩展，并且你可以使用上面的代码片段使它在它的场景中看起来更好看否则会看起来很疯狂。
一些布局（例如，想象一下，如果StackOverflow会占用所有空间）在宽度上看起来会非常难看。 1920像素 - 线宽太高，读起来非常不方便
这是max-width的用途。即使在某些动态布局中，您也必须限制网站的最大宽度，以最大限度地提高可用性和可读性。
并考虑较小的屏幕
确实，没有人再使用800×600台式机，但很多人使用分辨率更低的移动设备浏览网页。
这就是min-width的用途：使动态扩展的布局看起来不那么拥挤。
我希望这会有所帮助。
修改
Smashing Book对这个主题有一些非常好的想法。
编辑2：
我不希望我的帖子听起来像是希望您强制对访问者进行基于像素的调整 （显然，评论中的一些人以这种方式误解了我。）
清除它：
我认为理想的布局可以很好地适应任何可能的分辨率或设置 但是，我们不能总是完美地完成所有事情。时间/资源和目标受众是确定您的网站是否需要高级功能的关键。
我建议你为给定的工作使用正确的东西。
如果您正在开发的网站中有相当比例的访问者需要对网站进行更高级的调整，那么这可能是值得的。
（当然，有时候我们只是为自己做这件事情的感觉，但并不总是做出经济上合理的决定。）
尽管如此，在决定布局之前，你应该对它将是什么类型的网站，谁将是访客以及这些东西进行适当的研究，以及是否值得花时间让它们变得流畅或更具动态性。
答案 1 :(得分：34)
所有测量都有其自己的目的：
像素一样使用像素，例如边框。您可能不希望边框的宽度最终为1.3422像素。
以文本为中心的措施（em，ex）用于基于文本的内容，例如内容区域，标签和输入框。这是一种简单的方法，可以确保您有足够的空间容纳一定长度和宽度的文本。
使用基于窗口的内容的百分比，例如列。
当然也有例外。例如，您可能希望指定最小列宽（以像素为单位）。但是按照上面的说法，你的网页会很好地扩展。始终放大和缩小页面，看看它们如何使用不同的字体大小和浏览器形状 - 以后不要感到惊讶。
答案 2 :(得分：12)
我认为您必须首先了解在CSS中处理像素时存在的问题：
em和其他相对大小，则会尊重更改此用户的用户的决定。这在文本较重的网站上尤其重要，特别是如果有更多的老用户。另一方面，如果网站的设计很重要，我认为使用px指定字体大小而不破坏可用性是可能且合理的。最后，您需要自己做出决定，这取决于具体情况，但我认为指定字体大小（以像素为单位）是可以的。
顺便说一句，在使用em指定字体大小时，将body设置为font-size: 62.5%是好主意。这意味着基本字体大小为10px，因此1em为10px，1.6em为16px等等，因此在使用ems 设计时更容易以像素为单位进行思考。我仍然觉得这样工作很令人沮丧，特别是当ems级联的值时。有一些非常方便的网站，如PXtoEM.com，可以帮助解决这个问题。
屏幕是基于像素的布局，因此像素是许多事物的直观选择。这里的主要问题是不同的用户有不同的屏幕尺寸。正如其他人所指出的那样，使用min-width和max-width像素以及width百分比是一种有用的方式来尊重屏幕大小，同时防止您的网站被无理压扁或拉伸在非常小而非常大的窗户上。
但是，我通常会采用这种方法来支持CSS media queries。然后，您可以使用固定宽度的块，并随着屏幕尺寸的增加使布局更宽（除其他外）。但是，CSS媒体查询与所有酷炫的Web技术一样，都缺乏浏览器支持。最值得注意的是，IE8及更早版本不支持它们，尽管有一些JavaScript修复程序。另一方面，iPhone和其他手持设备确实支持它们，如果您希望您的网站在这些设备上看起来不错，我强烈推荐它们。
我认为固定宽度网格很好。固定宽度网格系统，如960 Grid System 它们本身很受欢迎，还有很多其他网站都有固定的宽度，如果你这样做，我怀疑你会听到很多抱怨。没有大屏幕的手持设备是一个问题，但这是应该使用CSS媒体查询的地方，因此可以指定所有像素，让您的网站在桌面上和iPhone。
最终，一切都取决于您的用户是谁，您需要支持什么，以及您希望网站看起来像什么，但在CSS中使用像素没有任何明显错误。
答案 3 :(得分：4)
这取决于你的造型。例如，对于列，宽度应该取决于文本大小，以确保它在多个分辨率/屏幕上看起来最佳。如果要将页面分为两部分，则应使用百分比。但是如果你想要这两个部分之间的1px边框，与分辨率无关，请使用像素。
答案 4 :(得分：4)
基本上，这取决于谁雇用你，以及你的工作受众。 出于制度目的（内容应优先于形状，如政府项目），您最好使用.em或％，它们更难控制，但在可访问性方面它们将非常友好。
如果我们谈论合作网站（形状是交易），像素将是一个更准确的工具，以满足客户对其品牌的期望。 液体界面（％，。em）在巧妙地完成时总是很好用，但不要忘记在极端条件下检查你的设计，并确保它是稳定的。
如果使用像素，您将完全控制网站的最终外观，但您必须假设某些用户无法有效地使用它。
最佳选择：而不是设计一个兼容所有平台的网站（这将导致多重缺陷设计），建议您的客户根据每个需求调整网站的特殊版本，更好的做法和更好的业务设计师也是......
答案 5 :(得分：2)
如果可能的话，我会说避免它，除非在某些情况下。
例如，对于细边框，可以指定1px。
对于max-和min-样式属性，也可以。但是如果可能的话，将非max / min属性设为百分比。
答案 6 :(得分：2)
这真是一个很好的问题，我之前曾多次问过这个问题。不是一个铁杆网页设计师（我更喜欢开发方面）我经常问我与之合作的设计师他们的意见，这就是我提炼的内容：
使用百分比与像素来确定元素大小等等，实际上是个人品味或每种特定情况下的要求。如果您需要按比例缩放，或者它可以很好地扩展，请使用百分比。如果没有，请使用像素。这里的人们使用了页面中主要列的示例，可能需要流畅但边界可能需要像素测量的精度。
显然，调整图像大小与其分辨率和像素单位有很大关系，所以我总是在这种情况下使用它们。
然而，使用em尺寸与像素或甚至点尺寸的文本是一个完整不同的鱼。我工作的大多数人都有字体大小的基本重置样式，使1em的大小降低到大约12px。然后，他们在其他地方（或尽可能靠近其他地方）使用ems来调整文本元素，表单控件等的大小。这就是我现在的操作方式，因为它似乎适用于台式机和笔记本电脑上的各种浏览器，操作系统和DPI。我不能为移动设备担保。
可访问性是关键 - 如果您需要为残障人士制作可用的东西或者开箱即用的各种设备，即使您认为旧的东西，也需要进行缩放。将其构建到您的模型中以便从一开始就设计网站，您可能会意识到在这种情况下甚至不需要绝对像素大小。
例如，一个艺术密集的设计可能会在一个单一的范围内设计，但残疾用户的新教育网站将不得不在各种情况下工作。
请记住，W3C提出了各种方法来确定尺寸和扩展规格，原因是灵活性。做任何最合适的事情并且适合你的观众（如Moustard先前所述）。
答案 7 :(得分：1)
我不是css / html专家，但我使用的惯例是使用像素作为外部容器和内部对象的百分比。
我和其他人一起检查我的布局的另一个经验法则是三像素规则。很少有一切都会在每个浏览器中准确排列。我们已经同意这项努力超过了移动三个像素或更少像素的好处。
答案 8 :(得分：1)
默认做正确的事。如果用户在禁用javascript且没有偏好Cookie的情况下访问您的网站，您应该为他们提供尽可能实用且易于访问的网页。
您的默认样式表应该不假设浏览器窗口，并且仍然呈现一个功能页面，无论多么可怕，低至320x320分辨率，最多无限制大小。如果摄影保真度如此重要以至于您无法信任浏览器缩放，有时它是，那么您应该使用像素测量（至少最小值）来封装固定大小的图像，以确保您不会最终重要的事情被掩盖了。指定最小宽度和百分比应该为您提供所需的控件，同时为您的用户提供所需的可访问性。即使可访问性现在不是问题，但如果网站成功，它将会更晚。
当你做了解浏览器窗口的更多信息时，如果保留设计的重要性证明了增加的工作，那么可以在备用样式表中使用固定宽度。
答案 9 :(得分：0)
如果你的目标是固定尺寸，那么像素就可以了。但是，如果您希望您的布局在各种分辨率/屏幕尺寸上看起来很好，那么您应该坚持使用百分比等更多相关指标。大多数人都瞄准后者。
答案 10 :(得分：0)
如果这是取悦您的客户所需要的，那就没关系。大多数情况下，您无法平衡不同屏幕尺寸的空间量与百分比。 CSS3媒体查询在这里有所帮助，但采用仍然存在问题。
答案 11 :(得分：0)
在大多数情况下，我更喜欢像素。 例如 - 内容的默认宽度为：960px。 在“1024”中它会没问题，屏幕两侧有小的自由空间。在那里放一些渐变或背景。在“1280”或“1440”或“1680”，或其他什么 - 会有越来越大的差距，但它看起来会很好。 是的，800，这个网站将是丑陋的。但谁在乎？每个主要参与者都放弃了对800的支持。这个决议的人太少了。
有许多不同的网站，%%将是更好的解决方案。
答案 12 :(得分：-1)
屏幕的构建块是像素。固定像素大小不会出错。正如其他海报所提到的，您也可以使用百分比或“em”作为可扩展的替代品。