对不同设备的背景进行了css的适配

原先在笔记本和台式机上，惠惠的那个背景经常是不能完全显示出来的，只能显示出来半个身子，但是在手机上看我的博客又是非常完美的......
所以说我采用了因人而治的手法，对不同设备进行了不同的背景设置：

Copy
/* 检测用户是否使用移动设备 */
@media only screen and (max-width: 767px) {
/* 改变样式 */
body {
background-image: url(https://img1.imgtp.com/2023/05/01/mhyoOtKF.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center ;
background-attachment: fixed;
}
.mt-auto:after {
content: "您当前采用“手机端”打开此网页";
font-style: italic;
font-weight: bolder;
color: wheat;
}
}
/* 检测用户是否使用台式电脑 */
@media only screen and (min-width: 768px) and (max-width: 991px) {
/* 改变样式 */
body {
background-image: url(https://img1.imgtp.com/2023/05/01/EiUP9R8D.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center ;
background-attachment: fixed;
}
.mt-auto:after {
content: "您当前采用“台式电脑”打开此网页";
font-style: italic;
font-weight: bolder;
color: wheat;
}
}

/* 检测用户是否使用笔记本电脑 */
@media only screen and (min-width: 992px) {
/* 改变样式 */
body {
background-image: url(https://img1.imgtp.com/2023/05/01/EiUP9R8D.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center ;
background-attachment: fixed;
}
.mt-auto:after {
content: "您当前采用“笔记本电脑”打开此网页";
font-style: italic;
font-weight: bolder;
color: wheat;
}
}