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

Detailed explanation of explain type in MySQL

How to implement responsive layout with CSS

Detailed explanation of explain type in MySQL

Vue implements the countdown component for second kills

Detailed explanation of the differences between SQL joint query inner join, outer join and cross join

Solve the problem of ifconfig being unavailable in docker

Detailed steps for implementing timeout status monitoring in Apache FlinkCEP

10 Deadly Semantic Mistakes in Web Typography

MySQL parameter related concepts and query change methods

Pure CSS to achieve input box placeholder animation and input verification

Slot arrangement and usage analysis in Vue

MySQL database introduction: detailed explanation of multi-instance configuration method

Recommend

Detailed explanation of docker nginx container startup and mounting to local

Build Maven projects faster in Docker

Example code of how to implement pivot table in MySQL/MariaDB

Detailed explanation of common methods of JavaScript Array

Calling the search engine in the page takes Baidu as an example

How to install pip package in Linux

Database SQL statement optimization

MySQL 8.0.20 installation and configuration tutorial under Docker

JavaScript to achieve full or reverse selection effect in form

How to build lnmp environment in docker

How to modify the MySQL character set

Detailed explanation of several ways to obtain the PID (TID, LWP) of Linux threads

How to use file writing to debug a Linux application

Use of Linux ipcs command

How to optimize MySQL group by statement