Simulate Bootstrap responsive grid system and bootstrap response Grid

Simulate Bootstrap responsive grid system and bootstrap response Grid

Bootstrap response (applicable to different terminal devices). The Bootstrap raster system divides the number of views into 12 based on percentages, and then uses media queries to set the float attribute for parallel display.

I. Media Query

Media QueryContains an optional media type and zero or multiple expressions to limit the range of style sheets that use media features

For example, the Media queries in width, height, color. CSS3 allows the content to be displayed only for the output device of a specific range, without changing the content itself.

The following are dimensions of common Bootstrap media queries:

@ Media (max-width: 767px) {}/ * less than or equal to 767 pixels */@ media (min-width: 768px) and (max-width: 991px) {}/* 768 ~ Between 991px pixels (minimum pixel 768 and maximum pixel 991 included) */@ media (min-width: 992px) and (max-width: 1199px) {}/ * 992px ~ Between 1199px pixels (minimum pixel 992 and maximum pixel 1199 included) */@ media (min-width: pixel px) {}/ * greater than or equal to pixel PX */

Resolution demarcation points of common media queries

3. Bootstrap raster system percentage calculation 12/100 = raster/x (percentage)

* { box-sizing: border-box; } [class*="col-"] { float: left; padding: 15px; border: 1px solid red; } .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%;}

3. When the browser size is smaller than or equal to 767px pixels vertically arranged and displayed, when the browser size is greater than 767px pixels arranged in a line

Iv. IE compatibility

<Meta name = "viewport" content = "width = device-width; initial-scale = 1.0">

Viewport is the default width and height of the webpage. The code above indicates that the webpage width is equal to the screen width (width = device-width) by default, and the original scaling ratio (initial-scale = 1) is 1.0, that is, the initial size of the webpage accounts for 100% of the screen area.

All mainstream browsers support this setting, including IE9. For older browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js. (or using respond. js can also make IE6-IE8 support CSS3 media Query)

To enable IE (including IE6) browsers to support HTML5 standards, such as <semantic tags> html5.js is required.

The source code is as follows:

<! DOCTYPE html> 
Https://my.oschina.net/JeeChou/blog/198464
Https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
Https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Http://qianduanblog.com/post/bootstrap3-learning-1-responsive-layout.html
Http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
Http://bootstrap.ninghao.net/scaffolding.html
Https://segmentfault.com/a/1190000007567739
Http://v3.bootcss.com/css/#grid