前言：响应式布局有很多种布局方式，如百分比，rem，vh，vw，flex，媒体查询，这里我们就说媒体查询
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { height: 300px; background-color: red; margin: 0 auto; } @media screen and (max-width: 767px) { /* 小屏幕下 --- 泛指手机 */ .box { width: 100%; } } @media screen and (min-width: 768px) { /* 中屏幕下 --- 泛指iPad 平板 768<=X<992 */ .box { width: 750px; } } @media screen and (min-width: 993px) { /* 中上 --- 我定义为pc小屏幕和平板较大的 993<=X<1200 */ .box { width: 970px; } } /* 以下都是pc 有大有小 可以根据自己需要添加或删除 */ @media screen and (min-width: 1200px) { .box { width: 1170px; } } @media screen and (min-width: 1366px) { .box { width: 1200px; } } @media screen and (min-width: 1600px) { .box { width: 1400px; } } @media screen and (min-width: 1920px) { .box { width: 1600px; } } @media screen and (min-width: 2560px) { .box { width: 2200px; } } </style> </head> <body> <div class="box"></div> </body> </html>
原文：https://www.cnblogs.com/myan/p/14684756.html