foreword
Recently, the company needs to develop its own official website to adapt to various devices, so I thought of using the Bootstrap framework to achieve it, and the essence of implementing responsive layout is its responsive grid system, so I only need to use There is no need to introduce the entire Bootstrap for the grid system.
Download the source code from Bootstrap's official website to view the implementation of Bootstrap's grid system. The bottom layer is actually a set of responsive solutions that combine response breakpoints + grid layout + responsive adaptation . Then I will take you in your own Let's implement a responsive grid system in the project.
1. Response breakpoint
When we need to set different styles for different screen sizes, we need to know what screen size needs to respond. These different screen sizes are called responsive breakpoints (thresholds).
| screen size | Class name distinction in grid layout | breakpoint (threshold) |
|---|---|---|
| Extra small screen (Extra small) | <576px | |
| Small screen (Small) | -sm | 576px ~ 768px (inclusive) |
| Medium screen | -md | 768px ~ 992px (inclusive) |
| Large screen (Large) | -lg | 992px ~ 1200px (inclusive) |
| X-Large | -xl | 1200px ~ 1400px (inclusive) |
| Extra large screen (XX-Large) | -xxl | >1400px |
The above breakpoints are internal breakpoints of the Bootstrap framework, which we can use as a reference for our development standards.
Now we use media queries to set breakpoints to display different background colors on different screen sizes:
<style>
/* 当屏幕宽小于576px时，以下代码生效 */
body {
background-color: #d2b9b9;
}
/* 当屏幕宽大于等于576px，小于768px时，以下代码生效 */
@media screen and (min-width: 576px) {
body {
background-color: #d9d5bc;
}
}
/* 当屏幕宽大于等于768px，小于992px时，以下代码生效 */
@media screen and (min-width: 768px) {
body {
background-color: #aed8ea;
}
}
/* 当屏幕宽大于等于992px，小于1200px时，以下代码生效 */
@media screen and (min-width: 992px) {
body {
background-color: #4ce04c;
}
}
/* 当屏幕宽大于等于1200px时，以下代码生效 */
@media screen and (min-width: 1200px) {
body {
background-color: #14736d;
}
}
</style>I won’t say much about media queries here. It should be noted that the code of media queries can be written in the style tag or in a separate CSS file, but it must be written after all CSS style codes, so that it can be guaranteed When the breakpoint is in effect, the code written in the media query can take effect and will not be overwritten by the normal style.
2. Grid layout
The so-called grid layout can be understood as how many parts a page or container (such as div) is divided into, and then set the corresponding number of sub 12 parts, which corresponds to The proportions of different copies are as follows:
| number of copies | % of total copies |
| 1 | 8.33333333% |
| 2 | 16.6666667% |
| 3 | 25% |
| 4 | 33.33333333% |
| 5 | 41.66666667% |
| 6 | 50% |
| 7 | 58.33333333% |
| 8 | 66.6666667% |
| 9 | 75% |
| 10 | 83.33333333% |
| 11 | 91.66666667% |
| 12 | 100% |
Example: Use the grid layout to achieve a row of 6 columns, 3 columns, 2 columns, and 1 column layout
<style>
html,
body {
margin: 0;
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.col {
box-sizing: border-box;
height: 100px;
border: 1px solid red;
margin-top: 10px;
}
/* 不同份数，所占的宽 */
.width-1 {
width: 8.33333333%;
}
.width-2 {
width: 16.66666667%;
}
.width-3 {
width: 25%;
}
.width-4 {
width: 33.33333333%;
}
.width-5 {
width: 41.66666667%;
}
.width-6 {
width: 50%;
}
.width-7 {
width: 58.33333333%;
}
.width-8 {
width: 66.6666667%;
}
.width-9 {
width: 75%;
}
.width-10 {
width: 83.33333333%;
}
.width-11 {
width: 91.66666667%;
}
.width-12 {
width: 100%;
}
</style>
<body>
<div class="row">
<!-- 一行6列 -->
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<div class="col width-2"></div>
<!-- 一行3列 -->
<div class="col width-4"></div>
<div class="col width-4"></div>
<div class="col width-4"></div>
<!-- 一行2列 -->
<div class="col width-6"></div>
<div class="col width-6"></div>
<!-- 一行1列 -->
<div class="col width-12"></div>
</div>
</body>The effect is as follows:
3. Responsive adaptation scheme
Responsive breakpoints + grid layout are introduced above. Next, we need to determine the responsive adaptation scheme according to the requirements. There are generally two types of development:
1. The code sequence of the PC-side priority adaptation scheme is (the PC-side is considered first, and the mobile-side is considered last)
/* ....这里的css样式，会在屏幕宽大于1200px时生效.... */
.....css样式.....
/* 当屏幕宽度大于992px ，但小于等于1200px时，显示如下样式 */
@media screen and (max-width: 1200px) {
}
/* 当屏幕宽度大于768px ，但小于等于992px时，显示如下样式 */
@media screen and (max-width: 992px) {
}
/* 当屏幕宽度大于576px ，但小于等于768px时，显示如下样式 */
@media screen and (max-width: 768px) {
}
/* 当屏幕宽度小于等于576px时，显示如下样式 */
@media screen and (max-width: 576px) {
}2. The code order of the mobile terminal priority adaptation scheme is (the mobile terminal is considered first, and the PC terminal is considered last)
/* 当屏幕宽度小于576px,显示以上样式 */
...css样式....
/* 当屏幕宽度大于等于576px, 同时小于768px时，显示以下样式 */
@media screen and (min-width: 576px) {
}
/* 当屏幕宽度大于等于768px, 同时小于992px时，显示以下样式 */
@media screen and (min-width: 768px) {
}
/* 当屏幕宽度大于等于992px, 同时小于1200px时，显示以下样式 */
@media screen and (min-width: 992px) {
}
/* 当屏幕宽度大于等于1200px，显示以下样式 */
@media screen and (min-width: 1200px) {
}4. Responsive page development
According to responsive breakpoints + grid layout + responsive adaptation , we will now implement a responsive grid system. Here we choose a responsive adaptation scheme that prioritizes the PC side as needed.
Create a new media.css file in the project, and the code is as follows:
/* 大于1200px的样式写在这里 */
.col-xlg-1 {
width: 8.33333333%;
}
.col-xlg-2 {
width: 16.6666667%;
}
.col-xlg-3 {
width: 25%;
}
.col-xlg-4 {
width: 33.33333333%;
}
.col-xlg-5 {
width: 41.66666667%;
}
.col-xlg-6 {
width: 50%;
}
.col-xlg-7 {
width: 58.33333333%;
}
.col-xlg-8 {
width: 66.6666667%;
}
.col-xlg-9 {
width: 75%;
}
.col-xlg-10 {
width: 83.33333333%;
}
.col-xlg-11 {
width: 91.66666667%;
}
.col-xlg-12 {
width: 100%;
}
/* 屏幕宽 > 992px，同时 <= 1200px时，样式写在这里 */
@media screen and (max-width: 1200px) {
.col-lg-1 {
width: 8.33333333%;
}
.col-lg-2 {
width: 16.6666667%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-5 {
width: 41.66666667%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33333333%;
}
.col-lg-8 {
width: 66.6666667%;
}
.col-lg-9 {
width: 75%;
}
.col-lg-10 {
width: 83.33333333%;
}
.col-lg-11 {
width: 91.66666667%;
}
.col-lg-12 {
width: 100%;
}
}
/* 屏幕宽 > 768px，同时 <= 992px时，样式写在这里 */
@media screen and (max-width: 992px) {
.col-md-1 {
width: 8.33333333%;
}
.col-md-2 {
width: 16.6666667%;
}
.col-md-3 {
width: 25%;
}
.col-md-4 {
width: 33.33333333%;
}
.col-md-5 {
width: 41.66666667%;
}
.col-md-6 {
width: 50%;
}
.col-md-7 {
width: 58.33333333%;
}
.col-md-8 {
width: 66.6666667%;
}
.col-md-9 {
width: 75%;
}
.col-md-10 {
width: 83.33333333%;
}
.col-md-11 {
width: 91.66666667%;
}
.col-md-12 {
width: 100%;
}
}
/* 屏幕宽 > 766px，同时 <= 768px时，样式写在这里 */
@media screen and (max-width: 768px) {
.col-sm-1 {
width: 8.33333333%;
}
.col-sm-2 {
width: 16.6666667%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-4 {
width: 33.33333333%;
}
.col-sm-5 {
width: 41.66666667%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-7 {
width: 58.33333333%;
}
.col-sm-8 {
width: 66.6666667%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-10 {
width: 83.33333333%;
}
.col-sm-11 {
width: 91.66666667%;
}
.col-sm-12 {
width: 100%;
}
}
/* 屏幕宽 <= 576px样式写在这里 */
@media screen and (max-width: 576px) {
.col-1 {
width: 8.33333333%;
}
.col-2 {
width: 16.6666667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333%;
}
.col-5 {
width: 41.66666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333333%;
}
.col-8 {
width: 66.6666667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333%;
}
.col-11 {
width: 91.66666667%;
}
.col-12 {
width: 100%;
}
}
Introduce and use in html:
<!-- 栅格系统的代码样式在media.css文件中-->
<link rel="stylesheet" href="./css/media.css" />
<style>
html,
body {
margin: 0;
}
.row {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.col {
box-sizing: border-box;
border: 1px solid red;
margin: 10px 0;
min-height: 100px;
}
</style>
<body>
<div class="row">
<!-- 屏幕宽 大于1200px时 一行4列 -->
<!-- 屏幕宽 <= 992px时 一行2列 -->
<!-- 屏幕宽 <= 576px时 一行1列 -->
<div class="col col-xlg-3 col-lg-6 col-sm-12">1</div>
<div class="col col-xlg-3 col-lg-6 col-sm-12">2</div>
<div class="col col-xlg-3 col-lg-6 col-sm-12">3</div>
<div class="col col-xlg-3 col-lg-6 col-sm-12">4</div>
</div>
</body>Summarize
In this way, a simple version of the responsive grid system is realized. In actual development, the response breakpoint can be customized according to the needs, and the adaptation effect on different screens and devices can be better realized.
recommended reading
Print.js realizes printing pdf, HTML, pictures (styles can be set and paged)
Quickly understand Pinia and data persistent storage (detailed tutorial)
Nginx deploys front-end static website detailed teaching (step by step)
The front end realizes the export and download of excel files (Blob data type)