対話型タイトルの作成

夢コードby Ellyの<フロントエンド開発者になる-入門編>第14課!
反応型ヘッドを作る時間講座を見ないで、まず自分の力で作って、追加しなければならない事項と不足している部分を主に勉強します.
みんなが好きになることを望みます🤓

今日の目標

反応型のスマホバージョンが一定以下になったとき?成果を変えればいい
授業を受けずに30分もまじめにやった結果は….悲惨だ.😂

私の実力はどこですか。

出てくる差は多くないようですが...ちょっと足りないように見えます.すでに知っている内容でも、時間内に試してみる!!そういえば思い出せません.大きな絵を描いていません.細部を見逃したようです時間が足りないと思ってね
追加する部分を一つ一つ見てみましょう!

body

通常は最初にcss defaultを設定します...どうしてしなかったの?
navbaの両側と上に白い余白があります.すぐキャンセルします!

body {
  margin: 0;
}

padding

ロゴのイメージとハンバーガーバーが両側にぴったりとくっついています.上下左右にダウンジャケットを入れてゆったり?私はあなたを助けます.ulラベルには、デフォルトのmarginとpaddingも含まれています.一緒に交換します.

.nav_bar {
    padding: 8px 12px;
}

.list {
    margin: 10px;
    padding: 0;
}

media

コードは、@mediascreen and(min-wid:800 px)と@mediascreen and(max-wid:800 px)の2つのケースに分けられ、残りのコンテンツを1つ定義するだけで自動的に適用できます.タブレットモードは実施せず、Webとモバイルの両方の場合(両方の場合)のみ行い、このような区分を行う必要はなさそうです.
結論-max-width:800 px

ハンバーガーの位置

私はnavboxのロゴコンテナ内で、ロゴ画像の同等の位置に宣言します.移動バージョン表示:block;Web上で表示:none;人に見られない.残念ながらdisplay:none;思いついたのは正しいが、先生はハンバーガーを宣言し、position属性を利用して強制(?)-absoluteを利用して位置決めしました!!!(どうしてこれが思いもよらなかったのか)もっと効果的だと思いますハンバーガーの対象を独立して処理するしかないからだ.

イベント処理

JavaScriptを使用します.Refri Bankで切り替えボタンで実現しましたので、参考にしてください!正解コードは私が前に反応板で切り替えたボタンとは少し違いますが、似たような感じがするので分かりやすいです.
CSS

  .navbar_toogleBtn.active , .navbar_icons.active{
    display: flex;
  }

JS

  const toggleBtn = document.querySelector('.navbar _toogleBtn');
  const menu = document.querySelector('.navbar menu'); 
  const icons = document.querySelector('.navbar _icons');

  toggleBtn.addEventListener('click', ()=> {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
  });

時間内に仕上げたいのですが...ちょっときついけど!
しかし、これまで理論から学ぶ概念が邪魔なく書かれていて、適用性も良く、勉強が悪いわけではないことに気づいた良い時間でした.