使用媒体查询，容器宽度会随着窗口宽度的改变而改变
没有缩放的效果
缩放后的效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>媒体查询</title> <style> *{ margin: 0; padding: 0; } .container{ height: 1200px; width: 100%; background: pink; margin: 0 auto; }
/*媒体查询的条件也可以是and or：@media (min-758px) and (max-1000px) */
@media (min- 768px) { /*这里的代码只有当（min- 768px）才会执行*/ .container{ width: 750px; } } @media (min- 992px) { /*这里的代码只有当（min- 992px）才会执行*/ .container{ width: 970px; } } @media (min- 1200px) { /*这里的代码只有当（min- 1200px）才会执行*/ .container{ width: 1170px; } } </style> </head> <body> <div class="container"></div> </body> </html>