在兼容性方面,在CSS中使用像素数而不是百分比是否不好?较低的分辨率怎么样?可以在1到100的范围内使用它们吗?
Answers:
这是一个难题,因为答案主要取决于您的情况。
像素还不错,我也经常使用它们。(有时甚至是字体大小。)
我通常以给定的大小(固定宽度布局的像素,流畅布局的百分比)固定布局的外部块元素,而在内部元素上,我通常会尽可能设置百分比。
有些元素根本无法用百分比或em
s进行样式设置,尤其是来自于不了解此类原理的图形设计师的花哨东西。
例如:如果您的网站上有一个具有简单样式的列,则可以轻松地将其宽度设置为百分比,但是如果它的背景图像的特定宽度没有考虑到缩放的设计,则看起来就很好具有固定宽度。在这种情况下,您必须确保页面的其余部分正确占据剩余的宽度。
请注意,您可以将像素与百分比一起使用。
例如,这是我最新的一个Web应用程序的摘录:
min-width: 800px;
width: 80%;
max-width: 1500px;
选择还取决于您要实现什么设计或布局。
对于固定宽度的布局,像素值很好。如果设计师为您提供的Photoshop图像包含真正精美的东西,甚至考虑如何调整大小都会非常复杂,那么您绝对应该这样做。
如果您的布局需要是动态的,则应使用百分比来确保其随着分辨率的变化而扩展,并且可以使用上面的代码段来使它在看上去疯狂的情况下看起来更好。
某些布局(例如,假设StackOverflow是否会占用所有空间)在例如的宽度上看起来很难看。1920像素-线宽太高了以至于阅读起来非常不方便。
这max-width
是为了什么。即使在某些动态布局中,您也必须限制站点的最大宽度,以最大程度地提高可用性和可读性。
并且还要考虑较小的屏幕。
确实没有人使用800×600桌面,但是许多人使用分辨率甚至更低的移动设备浏览Web。
这是min-width
为了:使动态扩展的布局在较小的布局上不显得拥挤。
我希望这有帮助。
编辑:
《粉碎书》对此主题有一些很好的想法。
编辑2:
我不希望我的帖子听起来像我希望您对访问者施加基于像素的大小调整。
(显然,评论中的某些人以这种方式误解了我。)
要清除它:
我认为理想的布局可以很好地适应任何可能的分辨率或设置。
但是,我们不能总是将所有事情做到完美。时间/资源和目标受众是确定您的站点是否需要该高级功能的关键。
我建议您为给定的工作使用正确的方法。
如果您正在开发一个站点,该站点将有很大一部分访问者需要对该站点进行更高级的调整,那么这是值得的。
(当然,有时我们只是为了自己做,以感觉有正确的做事的感觉,但这并不总是一个合理的财务决定。)
不过,在决定布局之前,您应该对将要成为什么样的网站,访问者是谁以及类似的东西进行适当的研究,以及是否值得花时间使它们变得流畅或更具活力。
所有的测量都有自己的目的:
将像素用于基于像素的事物,例如边框。您可能不希望边框的宽度最终为1.3422像素。
对基于文本的内容(例如内容区域,标签和输入框)使用以文本为中心的度量(em,ex)。这是确保您可以容纳一定长度和宽度的文本的简便方法。
对基于窗口的内容(例如列)使用百分比。
当然也有例外。例如,您可能要指定最小列宽(以像素为单位)。但是,请遵循上述内容,您的页面会很好地缩放。始终放大和缩小页面以查看它们如何使用不同的字体大小和浏览器形状-以后不要惊讶。
我认为您必须首先了解使用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媒体查询。然后,您可以使用固定宽度的块,并在屏幕尺寸增加时使布局变宽(除其他外)。但是,CSS媒体查询,就像所有很酷的Web技术一样,都缺乏浏览器支持。最值得注意的是,尽管有JavaScript修复程序,但IE8和更早版本不支持它们。另一方面,iPhone和其他手持设备确实支持它们,如果您希望自己的网站在这些设备上看起来不错,我会强烈推荐它们。
我认为固定宽度的网格很好。诸如960网格系统之类的固定宽度网格系统 本身就已经足够流行,而且还有许多其他站点具有固定宽度,以至于我怀疑如果这样做,您会听到很多抱怨。没有大屏幕的手持设备是一个问题,但这是应该使用CSS媒体查询的地方,因此可以指定所有像素值,并使您的网站在台式机和iPhone上看起来漂亮。
最终,一切都取决于您的用户身份,您需要支持的内容以及您希望网站的外观,但是在CSS中使用像素本质上没有错。
基本上,这取决于谁雇用您,进而取决于您的工作对象。出于机构目的(内容应优先于形状,例如政府项目),您最好使用.em或%,它们很难控制,但就可访问性而言,它们实际上是用户友好的。
如果我们谈论公司网站(最重要的是交易),像素将是满足您的客户对其品牌期望的更准确工具。精巧地使用液体界面(%,.em)总是好东西,但不要忘了在极端条件下检查设计并确保它会稳定。
如果使用像素,则可以完全控制网站的最终外观,但是您将不得不假设某些用户无法有效地使用它。
最佳选择:与其设计一个与所有平台兼容的网站(这将导致多缺陷设计),不如为您的客户提供适合每个需求的特殊版本的网站,这对于设计师来说是一种更好的做法,也是一项更好的业务。 ..
这确实是一个好问题,我之前已经问过很多次了。我不是一名顽固的Web设计师(我更多地是在开发方面),我通常会向与我合作的设计师询问他们的意见,以下是我总结的内容:
使用百分比vs像素来确定元素大小等,实际上是个人喜好或每种特定情况下的要求的问题。如果您需要缩放比例,或者缩放比例很好,请使用百分比。如果没有,请使用像素。这里的人们使用了页面中主要列的示例,可能需要保持流畅,但是边框可能需要像素测量的精度。
显然,调整图像大小与分辨率和像素单位密切相关,因此在这种情况下我总是使用它们。
但是,对文本使用em大小调整还是像素大小甚至点大小调整是完全不同的选择。与我合作的大多数人都对字体大小有基本的重置样式,这使1em的大小减小到约12px。然后,他们在其他任何地方(或尽可能靠近其他地方)使用em来调整文本元素,表单控件等的大小。我现在也是这样操作的,因为它似乎可以在台式机和笔记本电脑上的各种浏览器,操作系统和DPI上正常运行。我不能担保移动设备。
可访问性是关键-但是,如果您需要使残疾人可用的物品或开箱即用的各种设备,即使您可能认为陈旧的设备也需要扩展。将其构建到用于从头开始设计站点的模型中,您可能会意识到在这种情况下甚至不需要绝对像素大小。
例如,繁重的艺术设计可能会以单一比例进行设计,但是面向残障用户的新教育网站将不得不在各种情况下工作。
请记住,W3C出于各种原因(灵活性)而采用了各种方法来调整大小和缩放其规格。做最适合您的听众并且最适合您的听众的事情(正如穆斯塔德先前所说)。
默认情况下,做正确的事。如果用户在禁用javascript且没有首选项cookie的情况下访问您的网站,则应向他们提供一个功能强大且可访问的网页。
您的默认样式表应该对浏览器窗口不做任何假设,并且仍然渲染功能页面,无论多么丑陋,分辨率都应低至320x320,并且尺寸应无限制。如果照片保真度是如此重要,以至于您不能相信浏览器的缩放比例,有时甚至是这样,那么对于封装固定大小图像的元素,应该使用像素测量(至少是最小值),以确保最终不会出现重要的事情被掩盖了。指定最小宽度以及百分比可以为您提供所需的控制,同时为用户提供所需的可访问性。即使现在可访问性不是问题,但如果站点成功,它将在以后。
当您确实了解浏览器窗口的更多信息时,如果保留设计的重要性证明增加的工作是合理的,则可以在备用样式表中使用固定宽度。
在大多数情况下,我更喜欢像素。例如-内容的默认宽度ares:960px。在“ 1024”中可以,屏幕两侧都有较小的可用空间。在此放置一些渐变或背景。在“ 1280”或“ 1440”或“ 1680”或类似的格式中-差距会越来越大,但看起来会很好。是的,只要800美元-这个网站将很难看。但谁在乎?每个主要参与者都放弃了对800的支持。拥有这个分辨率的人太少了。
有很多站点,但是%%是更好的解决方案。
屏幕的组成部分是像素。固定像素大小不会出错。正如其他张贴者所提到的,您也可以使用百分比或“ em”作为可缩放替代项。