210709開発ログ

1)学習内容

メディアクエリ

メディアクエリ
:Webページの移動、閲覧時に自然に切り替えるcssコード

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

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: 320px) and (max-width: 767px) 
	.pc 	{color: blue;
		font-size: 20px;
		/*background-color: yellow;}*/

/*
@media (min-width: 100px) and (max-width: 559px) 
	.pc 	{color: green;
		font-size: 10px;
		background-color: gray;}
*/

⬇️ 미디어 쿼리 사용시 항상 넣어야함 

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

コメントサイト

https://www.w3schools.com/css/css_rwd_viewport.asp
w3schhols.com
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
css-trick
--

ビジネス・ヒント

は、属性がメディアクエリと結合するpcを表示し、カスタムビジュアル機能

を移動する.

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

.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;}}

メディアクエリーアプリケーション

モバイル制作後のタブレット、pc制作のメディアクエリー技術(ex.heabak)
->利点:符号量を減らす

<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;}

2)学習内容の難点または未解決の問題
メディア検索を初めて見るのは難しいです.
サイトや携帯電話から見ると、自然に変わったことに気づきました.
3)ソリューションの作成
メディアクエリー調査、教室の回顧
4)勉強の心得
新しいcssコードを知って、不思議に思った.
もう一週間が経ちました.とても疲れて、とても来週何を学ぶことができることを期待します.