適応型、反応型基礎
4205 ワード
学習の内容
コード#コード#
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- <h1 class="pc">PC Hello World</h1> -->
<!-- <h1 class="mobile">Mobile Hello World</h1> -->
<h1>미디어쿼리 응용</h1>
csshtml, body{
margin: 0;
padding: 0;
}
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;
}
}
*/
h1{
font-size: 20px;
background-color: yellow;
}
@media (min-width: 768px) {
h1{
font-size: 40px;
background-color: pink;
}
}
@media (min-width: 1024px) {
h1{
font-size: 80px;
background-color: gray;
}
}
/*
@media (min-width: 600px) 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;
}
}
*/
学習内容の難点
今日の勉強には何の難点もない.
解決策
ウェブサイトを作るときはモバイルタブレットの順に作ってみましょう
学習の心得.
これから学ぶことを楽しみにしています!おもしろい!!!
Reference
この問題について(適応型、反応型基礎), 我々は、より多くの情報をここで見つけました https://velog.io/@jihye0914/적응형-반응형-기초テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol