使用媒体查询，容器宽度会随着窗口宽度的改变而改变
没有缩放的效果
缩放后的效果：
<!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-width:758px) and (max-width:1000px) */
@media (min-width: 768px) { /*这里的代码只有当（min-width: 768px）才会执行*/ .container{ width: 750px; } } @media (min-width: 992px) { /*这里的代码只有当（min-width: 992px）才会执行*/ .container{ width: 970px; } } @media (min-width: 1200px) { /*这里的代码只有当（min-width: 1200px）才会执行*/ .container{ width: 1170px; } } </style> </head> <body> <div class="container"></div> </body> </html>
原文：https://www.cnblogs.com/alex-xxc/p/9739331.html