7月9日

学習の内容

メディア検索を学びました.メディアクエリーは、接続デバイスに基づいてWebページの解像度を変換する操作です.代表的なのは反応型、適応型のウェブサイトで、ウィンドウの大きさに応じてウェブデザインを最適化します.
メディアクエリーを使用する場合は、上記のコマンドを追加する必要があります.
このようにしてこそ、指定された数値に従って自然に規模を適用することができる.
ヘッドラベルの間に置けばいいです.
接続された機器の幅(width)値を基準に区分し,平均した機器の幅値を示す.
詳細については、GoogleまたはChromeの開発者モデルで、
必要な機器やサイズを直接確認できます.
320 pxから768 px以下:スマートフォン
768 px～1024 px以下:タブレット
1024 px~以上:pc

(Chrome Developerモード(F 12)で表示される追加パス画像)
CSS
@media(最小値)と(最大値)
@media (min-width: 300px) and (max-width: 767px) {
.pc{
color: blue;
font-size: 20px;
background-color: yellow;
}
}
cssコードで、このように使用します.前のheadの間にメタ値を挿入することに注意してください.
クラス属性は継承されるため、メディアコマンドの前後で継承されることを確認する必要があります.
h1 {
font-size: 20px;
background-color: yellow;
}
/max-width 1024 px未満/
@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}
このコードは、メディアクエリを適用する2番目の方法です.これは前の方法よりも応用手法です.また,コードはより簡略に表現でき,より良い符号化といえる.
そして、ウェブサイトを作るときは携帯電話-タブレットの順番で仕事をするのが簡単だと実務チラシをくれました.サイズが小さいのでページも簡略化されているので、経験的には小さい部分から作成した方が効率的です.しかし、時間が足りないので、このようにするのは難しいです.
また、各バージョンの携帯電話バージョンとpcバージョンでもcssファイルが分離されます.しかし、ネイバーのような特別なケースでなければ、このようなケースは少ない.
実習コードの添付

<meta name="viewport" content="width=device-width, initial-scale=1.0">


<link rel="stylesheet" type="text/css" href="css/style.css">

<!-- <h1 class="pc">PC Hello World</h1>

<h1 class="mobile">Mobile Hello World</h1> -->


<h1>미디어쿼리 응용</h1>

--------------
css
html, body, h1 {
margin: 0;
padding: 0;
}
/*.pc {

color: red;
font-size: 50px;
background-color: pink;

}
.mobile {
display: none;
}
@media (min-width: 320px) and (max-width: 767px) {
.pc {
display: none;

}

.mobile {
	display: block;    /*none 만 아니면 된다*/
}

}*/
/*接続者のデバイスを区別する方法は、幅(width)値で区別できます.

320px ~ 768px 미만 	: 스마트폰
768px ~ 1024px 미만 	: 태블릿
1024px ~ 이상 		: pc 

*/
/@media (min-width: 300px) and (max-width: 767px) {
.pc{
color: blue;
font-size: 20px;
background-color: yellow;
}
}/
/クラス属性は継承されます.異なる属性を適用する場合は、前後のコードを常に表示する必要があります.
これが面倒な場合は、cssファイルをバージョン別に分割することもできます./
/@media (min-width: 100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: gray;
}
}/
h1 {
font-size: 20px;
background-color: yellow;
}
/max-width 1024 px未満/
@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}
学習中の難点や未解決の問題
midwallクエリもpxではなく%単位で使用すると、より簡単な方法がありますか?
ソリューションの作成
考えなければなりません.
学習の心得.
スマートフォンが登場して間もなく、小型サイトの大部分はpcバージョンだった.そのため、自ら拡大する必要があり、クリックミスなど不便な点が多い.しかし、スマートフォンがさらに発展するにつれて、普段からこのようなサイトがずいぶん減ったと感じています.このように直接関連する内容を勉強すると、これらの便利さの背後には苦労している人がたくさんいることに気づきます.