[dg ai school]Webプログラミング10
9163 ワード
1）学習内容
メディアクエリ
HTML<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
</body>
</html>
CSSbody {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
</body>
</html>body {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="ftp-8">
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
<h1 class="pc">PC Hellow World</h1>
</body>
</html>body {
background-color: yellow;
}
html, body {
margin: 0;
padding: 0;
}
h1 {
margin: 0;
padding: 0;
}
.pc {
color: red;
font-size: 50px;
background-color: pink;
}
/*
320px~768px미만 : 스마트폰
768px~1024px미만 : 태블릿
1024px 이상 ~ : PC
*/
@media (min-width: 300px) and (max-width: 767px) {
.pc {
color: blue;
font-size: 20px;
/*background-color: yellow;*/
}
}
/*
@media (min-width: 100px) and (max-width: 599px) {
.pc {
color: green;
font-size: 10px;
background-color: gray;
}
}
*/
@media (min-width: 600px) and (max-width: 767px) {
.pc {
color: green;
font-size: 20px;
background-color: yellow;
}
}
768 px～1024 px以下:タブレット
1024 px以上~:PC
ユーザが接続したデバイスの値に基づいてデバイスを決定する.
メディアクエリ
ブラウザ幅メディアクエリーに適用し、基点でサイズを変更
PCバージョン、モバイルバージョンに変更
***含める必要があるメタタグ
HTML
<meta name="viewport" content="width=divice-width, initial-scale=1.0">
マシンのスクリーンは、接続されたマシンのウェブサイトの横方向アプリケーションのマシンと一致し、割合は常に1.0に保たれます.
w3school.com上のviewportユーザーが表示する装置を自動的に調整する
css-tricks.comがデバイスの幅を特定できない場合は、min-widthとmax-widthをチェックするだけです.
awwwards.comメディアクエリーを使用して移動バージョン、右クリックスキャン、ブラウザ幅を減らすときのバージョン変更
PC版モバイル版
HTML
<h1 class="pc">PC Hello World</h1>
<h1 class="mobile Hellow Wolrd"></h1>
.pc {
display: none; ---> PC의 클래스가 css로 볼 때는 사라짐, 내가 원하는 정보를 기기에 맞춰 보여줄 수 있음
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; ---> h1 태크 블록요소, 인라인으로 바꿔도 괜찮음, 감춰줬던 영역이 나타남. 기존의 속성과 같은 것이 좋음.
}
}
通常はまず携帯電話を作って、それからホームページに移動します。
集中的にソートし、表示される情報が少ない(開発サイクルが短い)
helbak.com移動から作成
<h1>미디어쿼리 응용</h1>h1 {
font-size: 20px;
background-color: yellow;
}
/* max-width 1024px 미만 */
@media (min-width: 768px) {
h1 {
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) {
h1 {
font-size: 80px;
background-color: gray;
}
}768 px以上からPC交換を開始
黄色が小さくなると黄色が適用され、下部のメディアクエリは非表示になります.
コード量を減らす
2）難点
3）解決方法
class配送についての部分が混同されているからかもしれません.
繰り返し
4）勉強の心得
モバイルページからPCバージョンへの移行がとても面白いです
想像以上にできることが多いので不思議です.
Reference
この問題について([dg ai school]Webプログラミング10), 我々は、より多くの情報をここで見つけました https://velog.io/@chaehwan_lee/dgaischool-web-10テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol