HTMLとCSSのFlexboxでレスポンスナビをコード化します:pt.2

このポストは、もともとフィーチャーされたdebugacademy.com .
敏感なデザインは、現在熱い話題です.それはTwitter上で、仕事の投稿、または記事のすべての時間を聞くものです.しかし、正確に応答設計ですか?そして、なぜそれはとても重要ですか?このポストでこれらの質問に答えます.我々はまた、私たちが私たちの最後のポストの助けを借りて作成したナビゲーションバーに構築するために学ぶものを使用します.あなたが既にいないならば、それをチェックしてください.

応答設計何と理由？

によるとWikipedia , 基本的に、敏感なデザインは、ウェブ・デベロッパーとデザイナーが彼らのウェブサイトがすべての装置でよく見えるようにするものです;タブレット、携帯電話、ラップトップとデスクトップコンピュータ.
応答のデザインだけで話題の言葉以上です.それは実際に非常に重要です.それほど多くの人々が主に彼らの電話でインターネットにアクセスするので、それはさらに関連しているようになりました.Web開発者として、あなたが応答する設計の基本を知っている必要があります.それで、ブレークポイントについて話すことによって始めましょう.

ブレークポイント

ブレークポイントは何ですか?よく、彼らはまさに彼らのように聞こえる:あなたのデザインのポイントは、あなたのウェブサイトの要素が壊れて見えるように開始します.あなたは、画面のサイズを変更し、歪みを見始めるように設計の領域に注意を払って、それらを見つけることができます.実際のブレークポイントはピクセル単位の値です.これらの値はChromeの開発ツールを使用して決定できます.また、ユニークなブレークポイント値を把握する時間や忍耐を持っていない場合は、一般的な画面サイズの値が使用できます.また、あなたはそれを眼球だけでできます.それぞれの方法には利点がある.あなたはおそらくすべての3つの組み合わせを使用して終了します.私が以前に言及したそれらの一般的なスクリーンサイズのいくつかを簡単に見てください.

あなたが見るならばCode Pen 以下に、ブレークポイントの明確な例が表示されます.
ご覧のように、私たちのタイトル「Navバーチュートリアル」は、我々がそれがそうであるように、1行にありません.我々のデザインは、もうきれいで均一に見えません.我々はそれを変更する必要があります.私たちのブレークポイントは約450 pxです.しかし、我々は実際にこのブレークポイントで何をしますか?それはメディアのクエリが来るところです.

メディア質問

メディアクエリプロパティは非常に有用です.おそらく頻繁にそれを使用します.正直に言うと、私は実際にメディアのクエリをどのように使用するかを理解し始めていませんでしたDebug Academy Web開発コース特定の条件が満たされるならば、メディア質問は我々に我々のウェブページの特定の資産または部分をスタイルさせます.彼らには多くのアプリケーションがあります、そして、あなたはクリストファーKadeによってこのすばらしい記事で彼らについてより多くを学ぶことができます.

メディアクエリへのディープダイブ

クリストファー・ケイ・ 2月19日・ 3分読む

#css #webdev #tutorial #beginners

今日、我々のブレークポイントでメディア質問を使用することに集中します.構文は以下の通りです.

@media (max-width: 450px) {

} 

我々は@media メディアのクエリを開始する要素.私たちは括弧内にブレークポイントを置きます.あなたはmax-width キーワードも.450 px以下のこのシングル画面の幅.これらの条件が満たされるならば、以下のコードは実行されます.
通常、CSSで複数のメディアクエリを必要とします.我々は単純なナビゲーションバーでのみ動作しているので、我々は1つだけです.将来的にいくつかのメディアクエリを含める必要がある場合は、プロセスは我々がこれまで議論したものに似ています.今私たちのNavbarを応答する必要があるCSSに移動しましょう.

ステップ1：UL CSS

我々が我々のNavbarを反応させるために加える必要がある若干のものが、あります.最初に加えましょうflex-wrap プロパティ.名前が示すように、これは特別なFlexboxプロパティです.コンテナが1つの線の上ですべてに合うためにあまりに小さくなるならば、それは我々の屈曲容器の中で内容を新しい線に巻きつけることができます.この場合、ul 我々の屈曲容器と各々li その中のアイテムです.そういうわけで、我々は我々の「タブ」要素の1つが新しい線の上に動くのを見ます.
また、追加する必要がありますjustify-content , CSSで定義したもの.今回は、我々はそれに等しい設定しているcenter . これはセンターNavbarメニュー項目になります.いくつかの理由で、我々のNavbarアイテムには、いくつかのデフォルトパディングがあります.これを削除し、すべてのアイテムが中心であることを保証するためにpadding を0にする.また、リセットする必要がありますbackground-color 私たちの背景色は70 pxの高さに閉じ込められているのでheader 前回.

ステップ2：懸賞タイトル

私たちのナビゲーションバー技術的に敏感です.これは、画面のサイズに応じて変更されます.しかし、それは本当に視覚的に魅力的に見えません.我々は、ちょうどそれが正確に我々が望む方法を得るためにもう少しCSSを必要とするだけです.我々は具体的にターゲットになる#title 別名「NAVバーチュートリアル」.これが我々のタイトルであるので、我々はそれを目立たせて、1つの線で単独で欲しいです.これを行うには、別のflexboxプロパティを使用しますflex-basis . このプロパティを使用すると、コンテナ内で取得する子要素またはコンテナ項目をどのように配置するかを決定できます.我々はセットしようとしているflex-basis 100 %.今“Navバーチュートリアル”自体でされます.
我々はまだ#title メニュー項目の残りの部分と同じようにする.我々は、単に定義することができますtext-align 中心として.あなたが密接に見るならば、あなたは「NAVバーチュートリアル」がまだ我々のヘッダーの中心にまだありません.これはmargin-right: auto 我々は以前に我々の移動に追加#title 左へ.これをオフにするには、追加する予定ですmargin-left: 0 . 今すぐ“Navバーチュートリアル”正確に我々が欲しい方法を中心にあります!

結論

おめでとう!あなたの応答ナビゲーションバーを終えた!これらの概念は本当に重要ですので、ここにそれらを残していない.新しいWebページを作成し、それを完全にこれまで学んだ概念を使用して応答してください.私はいくつかの追加リソースをフレックスボックスと応答設計についての詳細を学ぶために含まれます.
いつものように、私にいくつかの建設的なフィードバックを与えてください.私は常に改善を探しています.私がカバーするためにあなたが望むどんなトピックでもあるならば、知らせてください!読書ありがとうございます!

追加リソース

Google Mobile-Friendly Test

The Most Popular Navigation Bars Created with Flexbox