Responsive Web Design-   Viewport

Responsive layout is that a website can be compatible with multiple terminals - rather than making a specific version for each terminal.

advantage:  

Strong flexibility in the face of different resolution devices

It can quickly solve the problem of multi device display adaptation

Disadvantages:  

Compatible with various devices, heavy workload and low efficiency

Code is cumbersome, there will be hidden useless elements, and the loading time will be longer

In fact, this is a compromise design solution, which can not achieve the best effect due to the influence of many factors

To some extent, the original layout structure of the website has been changed, and users will be confused

A commonly used viewport meta tag for pages optimized for mobile web pages is roughly as follows:

Width: controls the size of the viewport. You can specify a value, such as 600, or a special value, such as device width, which is the width of the device (the unit is the CSS pixel when the scale is 100%).

Height: corresponding to width, specify the height.

Initial scale: initial scale, that is, the scale when the page is load ed for the first time.

Maximum scale: the maximum scale to which the user is allowed to zoom.

Minimum scale: the minimum scale to which the user is allowed to scale.

User scalable: whether the user can scale manually.

Many web pages are designed based on grid, which shows that web pages are arranged by columns.

Using grid view helps us design web pages. This makes it easier to add elements to a web page.

The responsive grid view is usually 12 columns, 100% wide, and automatically scales when the browser window is resized.

Create a responsive grid view

First, make sure that all HTML elements have   box-sizing   Property and set to   border-box.

Ensure that margins and borders are contained between the width and height of the element.

12 column grid system can better control responsive web pages.

First, we can calculate the percentage of each column: 100% / 12 columns = 8.33%.

Specify class in each column,   class="col-"   Used to define how many spans each column has:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

Responsive Web Design-   Media query

Use @ media query to make responsive design

If          If the window is less than 500px, the background will turn light blue:

Basic layout method - Flex layout

flex Not just an attribute, it contains a new set of attributes. The property set includes two parts: setting the container and setting the project.
Set the properties of the container:
display:flex;

flex-direction:row((default) | row-reverse | column |column-reverse
flex-wrap:nowrap((default) | wrap | wrap-reverse
justify-content:flex-start((default) | flex-end | center |space-between | space-around | space-evenly
align-items:stretch((default) | center  | flex-end | baseline | flex-start
align-content:stretch((default) | flex-start | center |flex-end | space-between | space-around | space-evenly
 Set the properties of the project:
order:0((default) | <integer>
flex-shrink:1((default) | <number>
flex-grow:0((default) | <number>
flex-basis:auto((default) | <length>
flex:none | auto | @flex-grow @flex-shrink @flex-basis
align-self:auto((default) | flex-start | flex-end |center | baseline| stretch

Example:

If the parent element is lu and the child element is li, lu is the container and li is the project

ul attribute: display: flex. Then ul is the container and li is the elastic layout of the item.