異なるデバイスの背景には、CSSの適応が行われています。

元々ノートパソコンとデスクトップで、惠惠の背景は完全に表示されず、半身しか表示されなかったが、携帯電話で私のブログを見ると非常に完璧だった......
だから私は個別の手法を採用し、異なるデバイスに対して異なる背景設定を行いました：

/* ユーザーがモバイルデバイスを使用しているかどうかをチェックする */  
    @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;
}
}