<媒体查询>----->媒体查询会根据设备的大小自动识别加载不同的样式
------><meta name="viewport" content="width=device-width, initial-scale=1.0">这条属性为设置试图宽度，并禁止缩放，
媒体查询实现统一网站在不同登录设备中实现不同效果，下面这段代码实现在设备最大宽度小于768px的情况下。不显示box1和box2的内容（display：none（不显示内容）/block（显示内容））
.box{
width: 100px;
height: 100px;
}
@media screen and (max-width:768px) {
.box{
background-color: aqua;
}
.box1{
display: none;
}
.box2{
display: none;
}
}
@media screen and (min-width:768px) and (max-width:996px){
.box{
background-color: brown;
}
.box1{
display: block;
}
.box2{
display: none;
}
}
@media screen and (min-width:996px){
.box{
background-color: blue;
}
.box1{
display: block;
}
.box2{
display: block;
}
}
<雪碧图>-->CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式，它允许你讲一个页面涉及到的所有零星图片都包含在一张大图中
--->优点：减少图片的字节、减少网页的http请求次数，从而大大提高页面的性能
允许将所有零星的图片包含在一张大图中，根据需求获得对应位置的图片进行展示
.icon1{
display: block;
width: 33px;
height: 33px;
background-image: url(./images/002.png);
background-position: 0 -10px;
border: 1px solid red;
}
.icon2{
display: block;
width: 33px;
height: 33px;
background-image: url(./images/002.png);
background-position:-92px -100px;
border: 1px solid red;
}
标签：box,雪碧图,媒体,查询,width,33px,background,display,block From： https://blog.csdn.net/m0_74169345/article/details/145186164