Bootstrap page layout 5-responsive layout (Format)

The aim is to optimize the page display optimization for different online devices.

　　Responsive layout: changes page changes based on the size of the browser window.

Principle: Use Media-queries of CSS to determine the size of the browser window and set some rules in the CSS style sheet!

 

For example:

　　Enter the following css3 format implementation in the <style> </style> label:

<Style>

Body {Background: green;} // note that the inline style cannot be written here, and the style can be customized using the CSS style.

　　　　@ Media (max-width: 767px ){Body {Background: Red}} // The Purple part indicates the rule of the elements to be customized.

</Style>

Explanation: The above code is implemented. When the browser window size is smaller than 767px, the style of the body label is set to 12 pixels in font and the background color turns red!

Likewise:

　　　　@ Media (min-width: 767px) {body {Background: yellow }}

　　　　The code above indicates that when the browser window size is greater than 767px, the style of the body label is set to 14 pixels in font, and the background color turns yellow!　

　　　　@ Media (min-width: 767px) and (max-width: 1000px) {body {Background: Blue }}

　　　　The code above indicates that when the browser window size is greater than 767px and less than 1000px, the style of the body label is set to 14 pixels in font and the background color turns blue!