12強でメディアクエリーを学びました.
今日は例題を導入して実習する時間です!

1有効なUI変更

スクリーンが小さくなって、以前制作したホームページは大きいスクリーンを基準にして、とても重苦しいことに見えます
私のページにはビデオが含まれているので、ビデオサイズより小さいと
フォントもページに従って小さく移動していません

本文を下に置き、不要な線を削除します.
タイトルサイズを小さくするなどして変更する

2画面サイズの決定

初めて画面サイズを決めます.
検査を開けて、スクリーンのサイズを見て、800 px未満で、テキストはおかしいです
800を基準として、800より大きい時と800より小さい時のデザインを変えてみましょう.
他は全部置いてありますから、追加すればいいです.

    @media(max-width:800px){
      
    }

画面が800 px未満の場合
スクリーンが800未満とはmaxが800 pxの場合

3本文の下に置く

10強11強で並ぶために、私はグリッドを学びました.
今、私が再びそのテキストを置こうとしたとき
gridはgrid値でなくてもいいです

grid値をコピーし、メディアセクションに移動します.

    @media(max-width:800px){
      #grid{
        display: block;
      }
    }

ディスプレイ部分をblockに変換

画面サイズが小さくなると、ID値がgridのタグの表示
gridがblockになると下に移動します
(block level elementになると画面全体に書き込まれるので)

四線消去

テキストを下に見ると,真ん中の線が気に入らない.
その線の原因を調べると

olラベルのborder-right属性が
上のol部分をコピー

    @media(max-width:800px){
      #grid{
        display: block;
      }
      #grid ol{
        border-right:none;
      }
    }

border-right:none; 交換すると、線がなくなっているのが見えます.

網の下の糸も目障りなので、外します
これはh 1ラベルです

    h1{
      border-bottom: 1px solid gray;
    }

この部分のためであることがわかります.
そのまま持ってきて枠を外すのでnoneに指定します

    @media(max-width:800px){
      #grid{
        display: block;
      }
      #grid ol{
        border-right:none;
      }
      h1{
        border-bottom:none;
      }
    }

結果

小さなスクリーンで簡単に見ることができます.
大画面では、大画面の特性が使いやすいレイアウトになっているのが見えます.
メディアクエリーを利用してこれ以上複雑なものを利用することができます
メディアクエリーはどのようなものなのか、異なる画面からWebがどのように適応しているのかを学び、後でこのような状況でメディアクエリーを学ぶことができます!
🤦‍♂️ 生活コードcssの授业の时间は2时间ぐらいです.整理しながら、聞いて、三日が過ぎました
でも理解してこそ本当の勉強ができると思います.次の講座JavaScriptも頑張って聴きます🤣