zl程序教程

您现在的位置是:首页 >  前端

当前栏目

[CSS3] CSS Media Queries

css3CSS Media Queries
2023-09-14 09:00:54 时间

Using CSS media queries allows you to design responsive layout in your web apps and website. We will go over the media query basics in this lesson.

 

body{
    background-color: limegreen;
}

/*
    @media not|only mediatype and (expression)
        CSS-Code
*/

@media (min-width: 600px){
    body{
        background-color: pink;
    }
}

@media (max-width: 300px){
    body{
        background-color: red;
    }
}

@media (min-width: 400px) and (max-width: 500px){
    body{
        background-color: yellow;
        color: black;
    }
}