How to implement responsive layout with CSS

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

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>Style code

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

<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>Style code

.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

Recommend

jQuery achieves full screen scrolling effect

This article example shares the specific code of ...

How to use Portainer to build a visual interface for Docker

Portainer Introduction Portainer is a graphical m...

A brief discussion of 12 classic problems in Angular

Table of contents 1. Please explain what are the ...

Solution to Vue3.0 error Cannot find module'worker_threads'

I'll record my first attempt at vue3.0. When ...

MySQL study notes on handling duplicate data

MySQL handles duplicate data Some MySQL tables ma...

Element tree control integrates a drop-down menu with icons (tree+dropdown+input)

Table of contents Requirements: Implementation st...

Summary of the differences between MySQL storage engines MyISAM and InnoDB

1. Changes in MySQL's default storage engine ...

Using JS timer to move elements

Use JS timer to make an element to make a method ...

IDEA uses the Docker plug-in (novice tutorial)

Table of contents illustrate 1. Enable Docker rem...

Detailed analysis of classic JavaScript recursion case questions

Table of contents What is recursion and how does ...

Implement MySQL read-write separation and load balancing based on OneProxy

Introduction Part 1: Written at the beginning One...

Discuss the development trend of Baidu Encyclopedia UI

<br />The official version of Baidu Encyclop...

React Hook usage examples (6 common hooks)

1. useState: Let functional components have state...

Example code for text origami effect using CSS3

Preface This article mainly shares with you an ex...

Summary of experience in using div box model

Calculation of the box model <br />Margin + ...