7/9メディアクエリー

💡 学習の内容

github
✔メディア照会:応答型適応サイトを作成し、サイトを移動とタブレット環境に自然に変換するためのcssコード
💨 アダプティブ(アダプティブ)Webサイト(サンプル・サイト)
-pcバージョンと移動バージョンにはそれぞれ固定値があり、断続的に続いています.
💨 応答型Webサイト(サンプル・サイト)
-モバイルデバイス、タブレット、デスクトップ上のすべてのデバイスのアプリケーションに対応するテンプレート.
-固定px値ではなくem、remおよび%単位を主に使用し、自然な寸法効果を有する
m.naver.comモバイル版https://www.naver.com/ pcのバージョンは全く違います.
АААААААААААА
width値から判断
360 pxから768 px以下:スマートフォン
768 px～1024 px以下:タブレット
1024 px以上~:PC
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
@media (min-width: 600px) and (max-width: 767px) {
.pc {
color: blue;
font-size: 20px;
background-color: yellow;
}
}
⑨注意事項
💨 @メディアに背景を設定する必要はありません.PCにbackground-colorが設定されている場合、@mediaは自動的に継承されます.
💨 > Mediaを使用する場合に適用するmetaラベル<meta name="viewport" content="width=device-width, initial-scale=1.0">viewportを使用するかどうか

メディア照会サイズ情報サイト：CSS-Tricks

スマートフォンモデルのボタンで、各デバイスがどのように応用されているかを見ることができます.
また、新しい既存デバイスを設定することで追加できます.
実務チラシ

<h1 class="pc">PC Hello World</h1>
<h1 class="mobile">Mobile Hello World</h1>

各バージョンのみを表示する方法(mobile/pc):+++++もう少し補足
Displayプロパティとメディアクエリーを組み合わせてpc/mobileバージョンのカスタムテキストを表示する機能
💨 最初のバージョンはモバイルバージョンを作成し、タブレット→pcバージョンを作成すると便利です.
АААААААА

/* 모바일 버전 */
h1 {
    font-size: 20px;
    background-color: yellow;
}
/* max-width 1024px 미만 */
/* 태블릿 버전 */
@media (min-width: 768px) {
    h1 {
        font-size: 40px;
        background-color: pink;
    }
}
/* pc버전 */
@media (min-width: 1024px) {
    h1 {
        font-size: 80px;
        background-color: gray;
    }
}

学習内容の難点

メディア検索部分では難しいところはありません.headセクションでmetaラベルを設定し、私が設定した@mediaを設定します.これは最も重要な部分です.メディアクエリーをどのように設定するかを考えるかもしれません.

¥2,000の解決策

講師が推薦したサイトを通じて、いろいろな機器のサイズを見るべきだと思います.

🙋‍♀️ 学習の心得.

今週の授業はもう金曜日です.残りの週末に学んだことをもう一度振り返ります.