<!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>
结果:
调整浏览器的窗口,div宽高自动缩放,真是很棒啊。