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 */ 





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


评论

此博客中的热门博文

通过Graphql成功地查询Contentful,以便在我的gatsby项目中访问和显示图像

Oracle忘了保存,Oracle Cloud甲骨文云服务器忘记SSH秘钥或未设置Public key的解决办法...

国外免费虚拟主机主要搭建网站