CSS 画面サイズ適応実装例

/* これは水平画面状態に一致させるための CSS コードです */

@media すべておよび (方向: 横向き){}

/* これは垂直画面状態に一致させるための CSS コードです */

@media すべておよび (方向:縦向き){}

@media X および (min-width:200px){}
/*X はメディア タイプです ---> print/screen/TV など。*/

/* 幅が 600px より大きく 960px より小さい場合は、フッター構造を非表示にします */

@media すべてかつ (最小高さ:640px) かつ (最大高さ:960px) {
      フッター{display:none;}
}

<meta name="viewport" content="width=デバイス幅、初期スケール=1.0、最大スケール=1.0、ユーザースケーラブル=いいえ"> 

@media screen かつ (最小幅: 320px) かつ (最大幅: 1156px) {

              .site-bg-dl {
              位置: 固定;
              高さ: 100%;
              幅: 100%;
              zインデックス: 0;
              背景画像: url(bjxzfwzx/images/bj1.png);
              背景サイズ: カバー;
              背景繰り返し: 繰り返しなし;
              背景添付: 固定;
              背景サイズ:100% 100%;
              背景サイズを100%から100%に変更します。
            }
}

/* 大画面: 1200px 以上*/
@media (最小幅: 1200px) { ... }

/*デフォルト*/
@media (最小幅: 980px) {...}

/* タブレットと小型画面のコンピュータ間の解像度*/
@media (最小幅: 768px) および (最大幅: 979px) { ... }

/* 横置きの携帯電話と縦置きのタブレットの解像度*/
@media (最大幅: 767px) { ... }

/* 横置きの携帯電話や解像度の小さいデバイス*/
@media (最大幅: 480px) { ... }