How to implement responsive layout with CSS

Implementing responsive layout with CSS

Responsive layout seems very high-end and difficult, but in fact, responsive layout can be achieved using only CSS

What you need to use is the unconnected query in CSS. Here is how to use it:

Three ways to use @media

1. Use directly in CSS file:

@media type and (condition 1) and (condition 2) {
    css style}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}

2. Import using @import

@import url("css/moxie.css") all and (max-width:980px);

3. This is also the most commonly used method - directly use the link connection, and the media attribute is used to set the query method

<link rel="stylesheet" type="text/css" href="css/moxie.css" media="all and (max-width=980px)"/>

The following is a simple responsive layout HTML code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Responsive</title>
    <link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
    <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<body>
    <div class="header">Header</div>
    <div class="main clearfix">
        <div class="left">Left</div>
        <div class="center">Middle</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Bottom</div>
</body>
</html>

Here are the CSS styles:

*{
    margin:0;
    padding:0;
    text-align:center;
    color:yellow; 
}

.header{
    width:100%;
    height:100px;
    background:#ccc;
    line-height:100px;
}
.main{
    background:green;
    width:100%;
}
.clearfix:after{
    display:block;
    height:0;
    content:"";
    visibility:hidden;
    clear:both;
}
.left,.center,.right{
    float:left;
}
.left{
    width:20%;
    background:#112993;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.center{
    width:60%;
    background:#ff0;
    height:400px;
    color:#fff;
    font-size:50px;
    line-height:400px;
}
.right{
    width:20%;
    background:#f0f;
    height:300px;
    font-size:50px;
    line-height:300px;
}
.footer{
    width:100%;
    height:50px;
    background:#000;
    line-height:50px;
}

.right{
    float:none;
    width:100%;
    background:#f0f;
    clear:both;
}
.left{
    width:30%;
}
.center{
    width:70%;
}
.main{
    height:800px;
}

.left,.center,.right{
    float:none;
    width:100%;
}

When the window is larger than 1024px, the command is compressed and no other changes occur:

When the window is smaller than 1024px and larger than 720px, the right bar stops floating and displays below:

When the window is smaller than 720px, the left, middle and right columns are all unfloated and have a width of 100%:

Okay, the layout is that simple, and grasping the details still requires constant practice. Continuous update, welcome everyone's advice

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Detailed explanation of the process of deploying Tomcat and creating the first web project in IDEA 2020.3.1

>>: W3C Tutorial (3): W3C HTML Activities