Fluid Layout#
Use units such as percentages to represent length and width, so that the content inside will also change when the overall length and width change.
Using %#
Directly use percentages, which will correspondingly enlarge or shrink when the page width changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container-box {
width: 100%;
height: 100vh;
background-color: orange;
padding: 1px;
}
.first,
.second,
.third {
width: 80%;
height: 30%;
background-color: skyblue;
margin: 1% auto;
}
</style>
<body>
<div class="container-box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</body>
</html>
Using rem#
You can modify the font-size property in the root tag html based on the width change, and then change the size of the elements in the page when the width changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container-box {
width: 100%;
height: 100vh;
padding: 1px;
background-color: orange;
}
.first,
.second,
.third {
width: 20rem;
height: 20rem;
margin: 1rem auto;
background-color: skyblue;
}
@media screen and (max-width: 768px) {
html {
font-size: 12px;
}
}
</style>
<body>
<div class="container-box">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</body>
</html>
Using Media Queries Directly#
This is similar to using rem, but it directly rewrites the styles under different widths.
Flex Layout#
display: flex
This may be useful when the entire page is a single div. If there are multiple divs on the page that need to be responsive, they may affect each other's layout.
Grid Layout#
Use some properties of grid itself to achieve responsiveness.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.container-box {
width: 100%;
height: 100vh;
padding: 1px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Columns adapt to content, minimum width of 200px */
grid-gap: 10px; /* Set grid gap to 10px */
}
.item {
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
</style>
<body>
<div class="container-box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
These are the common responsive solutions.