max-width 应该设置为固定值，还是百分比

This topic created in 3830 days ago, the information mentioned may be changed or developed.

.container {
width: 800px;
max-width: 100%;
}
.container {
width: 100%;
max-width: 800px;
}

如上，两种写法似乎能实现相同的效果，哪个是通用做法，有什么区别吗？

5 replies • 2015-11-20 12:52:28 +08:00

learnshare

Nov 20, 2015

一般来说， max-width 应该给固定值。就是第二种写法

看起来两种写法很多情况下都不会有同样的效果，比如 .container 的父元素宽度大于 800px 的时候，第一种 .container 宽度只有 800 ，第二种 .container 可以小于 800

leetom

Nov 20, 2015

@learnshare 父元素大于 800 ，第二种 100%为啥会小于 800 呢？

要实现占满小屏幕宽度，而不会占满大屏幕的自适应页面，都可以实现啊

learnshare

Nov 20, 2015

@leetom 因为你设置了 max-width ， width 实际值不会超过它

leetom

Nov 20, 2015

@learnshare 父元素超过 800 ，第二种情况应该是正好 800px （不考虑 margin padding ）啊，怎么会小于？

learnshare

Nov 20, 2015

@leetom 我是说 [可以小于]，这个时候的确是 [恰好等于] 800