クエリー[CS]メディア

メディアクエリーの使用：CSS：スタイルシートのカスケード｜MDN
Responsive UI - Layout - Material Design
ユーザーは、어떤 기기로 접속하든지(モバイル、タブレット、デスクトップなど)の開発者の予想通りにコンテンツを表示する方法を考慮する必要があります.

私はずっと好奇心を持っていますが、実際にはどんな方法で応用するか知りたいです.

ユーテッコクラス1のYouTube教室ミッションで好奇心を解決します

MDNドキュメントをまとめてみましょう!

さあ.行きましょう.ははは….へへへ...ははは….へへへ...

デジタルメディアクエリ

Webサイトまたはアプリケーションのスタイルは、ターミナルタイプおよびプロパティまたは数値に基づいて変更できます.

💪メディアタイプ

面白くない話の続きになる.1分我慢して読みましょうか.
デバイスの一般カテゴリ.
not,onlyが論理演算子を使用する場合を除く.△次で改めて勉強します!
デフォルトはallです.
タイプの説明はすべてのデバイスに適しています.出力成果物と出力プレビュー画面に表示されるドキュメントを印刷します.画面は主に画面ですこれは音声合成装置の目標である.

💪メディアのプロパティ

ユーザーエージェント(ユーザーを表すプログラムは、웹 맥락에서는 브라우저でしょうか?)

出力装置

環境

以上の特性.

💪論理演算子

論理演算子not、and、only、カンマ(or)を使用して、複雑なクエリーを組み合わせることができます.
not,onlyはメディアタイプも指定する必要があります.

📖使用方法

あら何言ってんの😅😅
今まで読んだのはつまらないでしょう.
では、本格的な使い方を見てみましょう.

1.メディアタイプの指定

メディアタイプはデバイスの一般的な分類です.

一般的にはscreenですが、プリンタやオーディオベースのスクリーンリーダーなどもあります.

@media print { ... }

// 여러개도 가능
@media screen, print { ... } 

2.メディア機能の指定

特定のメディア機能...どういう意味か分からないでしょう.

例えば、

は、와이드스크린 모니터에서만, 마우스를 사용하는 컴퓨터에서만, 저광도 장치에서만と区別することができる.

// viewport가 1000px 이하인 경우
@media (max-width: 1000px) { ... }

// 사용자의 주 입력 방식이 요소 위에 hover할 수 있는 경우 
@media (hover: hover) { ... }

// 흑백이 아닌 모든 장치
@media (color) { ... }

3.複雑なミラークエリーの作成

のデフォルトでは、論理演算子とは何かを知っておく必要があります.次に例を示します.

👇 簡単ですよね?

// 30em 이상의 폭을 가진 화면 && 가로 방향인 경우
@media (min-width: 30em) and (orientation: landscape) { ... }

// 스크린 && 30em 이상의 폭을 가진 화면 && 가로 방향인 경우
@media screen and (min-width: 30em) and (orientation: landscape) { ... }

👇 カンマはorを表します!

// 높이가 680px 이상 || 화면 방향이 세로일 경우
@media (min-height: 680px), screen and (orientation: portrait) { ... }

👇 notはメディアクエリ全体の意味を反転しました!

// not은 제일 나중에 적용됩니다1
@media not all and (monochrome) { ... }

// 마치 이렇게!
@media not (all and (monochrome)) { ... }

// not은 제일 나중에 적용됩니다2
@media not screen and (color), print and (color) { ... }

// 마치 이렇게!
@media (not (screen and (color))), print and (color) { ... }

👇 Onlyでは、古いサポートされていないブラウザにスタイルを適用することは許可されていません(新しいブラウザはサポートされていません~)

@media only screen and (color) { ... }

📈レベル4の構文強化

今はmax-も嫌になった!

// 너무 꿀이죠!!
@media (width <= 30em) { ... } 

// 답답하다..
@media (min-width: 30em) and (max-width: 50em) { ... }

// Level4에서는 부등호를 쓰지!
@media (30em <= width <= 50em ) { ... }

orを使用できます.

// 흑백화면인지 혹은 hover가 가능한 지
@media (not (color)) or (hover) { ... }

Layout - Responsive UI

미디어 쿼리로 반응형 웹을 디자인한다わかりました
しかし、どのような基準点で反応型ネットワークになるのだろうか.

1. Breakpoints

궁금한 건 뭐니뭐니해도 화면이겠죠!

スクリーン分割の基準は何ですか?

👆 上の図は、ブレークポイントの幅を480, 600, 840, 960, 1280, 1440, 1600dpに分けることを要求しています.

材料設計では、次の項目を確認しています.

Material Design Breakpoints

2. Grid

材料設計の応答UIでは、グリッドレイアウトの基礎は12列である.

このグリッドは、画面サイズが変化したときに비쥬얼적으로 일관성を提供します.

3. Surface behaviors

、今度は遊ばないで!必要だと感じたらアップロードします.🤙

4. Patterns

、今度は遊ばないで!必要だと感じたらアップロードします.🤙