1 Responsive development

Principles of Responsive Development

It is to use media queries to set the layout and style for devices of different widths, so as to adapt to the purpose of different devices

Equipment division	Size range
Ultra small screen (mobile phone)	`w < 768px`
Small screen devices (tablets)	`768px <= w < 992px`
Medium screen (desktop monitor)	`992px <= w < 1200px`
Widescreen devices (large desktop monitors)	`w >= 1200px`

Responsive Development Containers

Responsive requires a parent as a layout container to cooperate with child elements to achieve change effects

The principle is to change the size of the layout container through media queries under different screens, and then change the arrangement and size of the sub-elements inside, so as to realize different page layout and style changes under different screens

Usually our responsive size division (but we can also define our own division according to the actual situation):

Very small screen (mobile phone, less than 768px): set the width to 100%
Small screen (tablet, greater than or equal to 768px): set the width to 750px
Medium screens (desktop monitors, greater than or equal to 992px): Width is set to 970px
Large screens (large desktop monitors, greater than or equal to 1200px): Width is set to 1170px

HTML part:

<!-- 布局容器 -->
<div class="container"></div>

CSS part:

.container {
    height: 150px;
    margin: 0 auto;
    background-color: pink;
}
/* 超小屏幕 小于 768 布局容器宽度为 100% */
@media screen and (max-width: 767px) {
    .container {
        width: 100%;
    }
}
/* 小屏幕 大于等于 768，布局容器 750px */
@media screen and (min-width: 768px) {
    .container {
        width: 750px;
    }
}
/* 中等屏幕 */
@media screen and (min-width: 992px) {
    .container {
        min-width: 970px;
    }
}
/* // 大屏幕 */
@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

Case: Responsive Navigation

When our screen is greater than or equal to 800 pixels, we give nav a width of 800px, because the sub-box inside needs to float, so nav we need to clear the float
nav It contains 8 small li boxes, each with a width of 100px and a height of 30px, displayed in a floating row
When our screen zooms and the width is less than 800 pixels, nav the box width is modified to 100% width
nav For the 8 smalls inside li, the width is changed to 33.33%, so that only 3 smalls can be displayed in one line li , and the rest of the lower lines will be displayed

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
        }
        
        .container ul li {
            float: left;
            width: 93.75px;
            height: 30px;
            background-color: green;
        }
        
        @media screen and (max-width: 767px) {
            .container {
                width: 100%;
            }
            .container ul li {
                width: 33.33%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
            <li>导航栏</li>
        </ul>
    </div>
</body>

</html>

2 Bootstrap front-end development framework

Bootstrap comes from Twitter (Twitter) and is currently the most popular front-end framework. Bootstrap is based on HTML, CSS and JAVASCRIPT. It is concise and flexible, making Web development faster

Chinese official website: Bootstrap Chinese website

官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

Framework: As the name implies, it is a set of architecture, which has a relatively complete set of webpage function solutions, and the control is in the framework itself, with prefabricated style libraries, components and plug-ins. Users should develop in accordance with certain specifications stipulated by the framework

Advantages of Bootstrap:

Standardized html+css coding specification
Provides a set of simple, intuitive and powerful components
Has its own ecosystem, constantly updated and iterated
Make development easier and improve development efficiency

Bootstrap uses four steps:

Create folder structure
Create html skeleton structure
Import related style files
writing content

Create folder structure

bootstrap
  -css
  -fonts
  -js
css
images
index.html

HTML skeleton structure

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Import related style files

<!-- Bootstrap 核心样式-->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

writing content
- Use Bootstrap's pre-defined styles directly
- Modify the original style of Bootstrap, pay attention to the weight problem
- The key to learning Bootstrap well is to know which styles it defines and what effects these styles can achieve

layout container

Bootstrap needs to wrap a container for the page content and the grid system .container , and it provides two classes for this purpose.

container kind
- Container fixed width for responsive layout
- Large screen (>=1200px) width is set to 1170px
- The width of the middle screen (>=992px) is set to 970px
- For small screens (>=768px), the width is set to 750px
- Ultra small screen (100%)
container-fluid kind
- Fluid Layout Container 100% Width
- A container that occupies the entire viewport.

3 Bootstrap grid system

introduce:

The grid system is "grid systems" in English, and some people translate it as "grid system". It refers to dividing the page layout into columns of equal width, and then modularizing the page layout by defining the number of columns

Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases

Grid selection parameters

The grid system is used to create page layouts through a series of combinations of rows and columns, and your content can be placed in these created layouts

Divided into 1~12 equal parts according to different screens
Row (row) can remove the 15px margin of the parent container
xs-extra small: extra small; sm-small: small; md-medium: medium; lg-large: large
The column (column) is greater than 12, and the elements where the redundant "column" is located will be arranged in a new line as a whole
Each column defaults to about 15 pixels padding
You can specify the class names of multiple devices for a column at the same time, so as to divide different copies. For example class="col-md-4 col-sm-6"

For example, col-lg-3 col-md-4 col-sm-6 col-xm-12 it means that as the screen size shrinks, the boxes that can be placed in each row become 4, 3, 2, 1

<!-- 有12个，则可以占满一行 -->
<div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">1</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">2</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">3</div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xm-12">4</div>
</div>
<!-- 有12个，则可以占满一行，不同份数表示了所占比例 -->
<div class="row">
    <div class="col-lg-1">1</div>
    <div class="col-lg-2">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-6">4</div>
</div>
<!-- 不足12个，则空出多余 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-2">4</div>
</div>
<!-- 超出12个，则放到下一行 -->
<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-4">4</div>
</div>

column nesting

Grid System The built-in grid system nests content again. A simple understanding is that a column is divided into several small columns. We can do this by adding a new .row element and a series .col-sm-* of elements to existing .col-sm-* elements

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-6">第一小列</div>
                <div class="col-md-6">第二小列</div>
            </div>
        </div>
        <div class="col-md-4">第二列</div>
        <div class="col-md-4">第三列</div>
    </div>
</div>

The layout effect is as follows:

column offset

Use .col-md-offset-* classes to offset columns to the right. * These classes actually increase the left margin (margin) for the current element by using selectors

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 col-md-offset-4">2</div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">0</div>
    </div>
</div>

The layout effect is as follows:

column sort

The order of the columns can be easily changed by using .col-md-push-* the and class.col-md-pull-*column

<div class="container">
    <div class="row">
        <div class="col-md-4">左侧盒子</div>
        <div class="col-md-8">右侧盒子</div>
    </div>
    <div class="row">
        <div class="col-md-4 col-md-push-8">左侧盒子</div>
        <div class="col-md-8 col-md-pull-4">右侧盒子</div>
    </div>
</div>

responsive tools

In order to speed up the development of mobile-friendly pages, use the media query function and use these tools to easily display or hide page content for different devices. In addition to the .hidden-xm responsive hidden tool class, there is also .visible-xm a responsive display tool class, which is displayed when the screen is on an ultra-small screen (mobile phone)

[HTML+CSS] Responsive layout for mobile WEB development

1 Responsive development

2 Bootstrap front-end development framework

3 Bootstrap grid system

Guess you like