min-width max-width @media screen and
/* Media Queries
Responsive Design
Style Elements On Different Screen Sizes
min-width:--- starting from
max-width:--- up to
Mobile First */
Responsive Design
Style Elements On Different Screen Sizes
min-width:--- starting from
max-width:--- up to
Mobile First */
INDEX.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Tutorial</title>
<link rel="stylesheet" href="styles.css">
</head>
<body >
<div class="banner">
<h1>Hello World i'm Learning css</h1>
</div>
</body>
</html>
CSS:
/* Media Queries
Responsive Design
Style Elements On Different Screen Sizes
min-width:--- starting from
max-width:--- up to
Mobile First
*/
body {
background: yellow;
}
.banner {
background: blue;
border-radius: 10px;
}
h1 {
color: white;
text-decoration:underline;
text-align: center;
text-transform:capitalize
}
@media screen and (min-width:576px) {
body {
background: red;
}
.banner {
background: yellow;
}
h1 {
color: black;
font-size: 60px;
}
}
@media screen and (min-width:700px) {
body {
background: green;
}
.banner {
background: red;
}
h1 {
color: olive;
font-size: 40px;
text-align: left;
font-family: Georgia, 'Times New Roman', Times, serif;
}
}
评论
发表评论