当浏览器窗口宽度很大时候：
显示500×500的青蓝色块
当浏览器窗口中等时候：
显示300×300的蓝色色块
当浏览器窗口非常小的时候：
显示100×100的红色色块
这种布局叫做响应式布局，会根据窗口宽度，自动变化样式
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<title></title>
<style>
/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width:768px) {
.div1{
width: 100px;
height: 100px;
background-color: red;
}
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width:992px){
.div1{
width: 300px;
height: 300px;
background-color: blue;
}
}
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
.div1{
width: 500px;
height: 500px;
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="div1"></div>
<script></script>
</body>
</html>
响应式布局
媒体查询
媒体查询是css的技巧之一，它是用@media来实现的
/ 小屏幕手机端 /
@media (min-width: 0px) and (max-width:768px) {
.div1{
width: 100px;
height: 100px;
background-color: red;
}}
/ 中等屏幕（桌面显示器，大于等于 992px） /
@media (min-width: 768px) and (max-width:992px){
.div1{
width: 300px;
height: 300px;
background-color: blue;
}}
/ 大屏幕（大桌面显示器，大于等于 1200px） /
@media (min-width: 992px) {
.div1{
width: 500px;
height: 500px;
background-color: aqua;
}}
3个div样式，但是css会根据当前的浏览器窗口宽度，自动选择其中的1个作为样式作用与HTML文档中
转载：HTML实现手机端适配_大前端工程师的博客-CSDN博客_html 适应手机
https://blog.csdn.net/chengqige/article/details/117844872
