使用媒体查询，容器宽度会随着窗口宽度的改变而改变
没有缩放的效果
缩放后的效果：
<!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>CSS 媒体查询
原文地址：https://www.cnblogs.com/alex-xxc/p/9739331.html