学习CSS布局 - max-width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>max-width</title>
    <style>
        .main {
            max-width: 700px;
            border: 1px solid red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="main">
        在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。<br />
        这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！<br />

        顺便提下， 所有的主流浏览器包括IE7+在内都支持 max-width ，所以放心大胆的用吧。
    </div>
</body>
</html>

结果：

学习CSS布局 - max-width

调整浏览器的窗口，div宽高自动缩放，真是很棒啊。

原文地址： http://zh.learnlayout.com/max-width.html