为什么:
width: 98%;
max-width: 1140px;
执行与
width: 1140px;
max-width: 98%;
第一个是有意义的,我说宽度是98%,但不要超过1140px宽。
然而,第二个会说页面是1140px宽,但然后会去和98%的页面一样大,对吧?所以例如超过1140px...但显然不是,因为它和第一个一样。
有人能解释为什么吗?
根据我对物业的了解:
if width > max-width use max-width
if max-width > width use width
因此,使用您的例子,这一定意味着1140px在您正在查看的屏幕分辨率下严格小于98%。
缩小你的浏览器屏幕,你会得到不同的结果。
这有点不相关,但我发现max-width
(以及相应的属性max-height
)在Internet Explorer中的图像存在问题,并发现这有助于引导它使用正确的值:
img {
max-width: 150px;
max-height: 120px;
width: auto !important;
height: auto !important;
}
如果没有最后两个属性,大多数符合标准的浏览器都会正确地维护纵横比,但Internet Explorer不会这样做,除非您这样做。
编辑:看起来我说的答案和其他人基本一样。