An introduction to responsive layouts

What is a response? The same page has different layouts for different screen sizes.

The traditional way of development is to develop a set of PC terminal, mobile terminal development of another set, and the use of responsive layout as long as the development of a good, the disadvantage is that CSS is heavy.

As shown in the figure below:

Reactive layout scheme selection

The options for responsive design are:

  • CSS3 Media Query (recommended) : Media Query, compatible with IE9+, but compatible with IE6-8 by plug-in
  • Flex: Flexible layout, poor compatibility (IE10+)
  • Grid: Grid layout, less compatible
  • Columns: Grid systems that often rely on a UI library, such as Bootstrap

The worst thing about responsive development is that you don’t use REM as a hybrid

Introduction to CSS3 Media Query

The CSS3 Media Query makes it easy to switch between different page layouts for different screen widths

Compatibility: IE9+

At present, CSS3 Media Query implementations are mature for IE compatible libraries such as response. js and CSS3-mediaqueries-js

  • Respond. Js (recommended) : 1K after compression, only the most commonly used in media Query is implementedmin-width max-widthCompatibility;
  • Css3-mediaqueries-js: Basically implements compatibility with all media Query features in the CSS3 specification, so the compression is 16K, and the test feedback is much lower than response.js;
<! -- HTML5 shiv and Respond.jsforIE8 support of HTML5 elements and media queries --> <! -- WARNING: Respond.js doesn't work if you view the page via file:// --> <! -- [if lt IE 9] > < script SRC = "https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js" > < / script > < script SRC = "https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js" > < / script > <! [endif]-->Copy the code

CSS3 Media Query usage

The introduction mode is divided into embedded style and external style. It is recommended to use the embedded style

When using the inline style, it is recommended that the responsive code be written below the corresponding normal style and not separately for maintenance purposes

@media screen and (min-width: 480px) {.header {background: red; }} @media screen and (max-width: 800px) {}Copy the code

Logical operators:

and or not onlyCopy the code

Breakpoint selection (page size)

From (Chao) to (XI) grid system

Mainly copying Bootstrap and Layui

Why make a wheel? Grid systems tend to rely on a UI framework, but often we don’t need a lot of components and styles, just one grid is enough, for this requirement, I made a grid system from (Chao) (XI)

Raster systems are used to deal with the problem of multi-terminal page adaptation. The grid’s responsiveness, thanks to CSS3 Media Queries, is typically adapted for four different screen sizes

Why 12 columns: Because 12 has many common divisor, it is the least common multiple of 1, 2, 3, 4, and 6, so it is relatively flexible.

I. Grid layout rules:

  1. Use.container (fixed width in devices above small screens) and.container-fluid (width will not be fixed, but 100% fit) as layout containers.

    • Rows must be contained in the layout container in order to give them appropriate permutation and padding.
    • Only a col column can be an immediate child of a row

  3. Use something like col-md-* to define a set of columns and place them within a row.

    • variable*Represents the number of equal parts used by the column. Optional values range from 1 to 12.
    • If the sum of the bisector values of multiple columns is equal to 12, the rows are arranged exactly full. If it is greater than 12, the extra columns will automatically start on another row.

  4. Columns can be appended to default classes such as col-space-* and col-md-offset-* to define column spacing and column offset.

    • If the column spacing is greater than 30px, use column offset

Ii. Responsive rules:

Three, responsive layout experience:

  1. For areas with large typographical differences, write two copies of the code, and hide the HTML of the small screen when the large screen is used, and hide the HTML tags of the large screen when the small screen is used. And this shouldn’t be the norm. If you often have to write two sets of pages, it’s probably not a good idea to write two sets of pages.

  2. Change the left/right layout to up/down, and move the right content down.

  3. Font size, spacing smaller

/** * Works: myreset.css * Maintenance: Bai Xiaoming * Update: November 24, 2017 * Concept: 1. Adapted to Chinese, based on the latest mainstream browser * 2. reset is not intended to clear the browser's default style, this is only part of the job. Clearing and resetting are inextricably linked. * 3. The purpose of reset is not to make the default style consistent across all browsers, but to reduce the problems that the default style can cause. */ /* reset ========================================================================== */ @charset"utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
pre,dl, dt, dd, ul, ol, li,
form, fieldset, lengend, button, input, textarea,
th, td { margin: 0; padding: 0; }

ul, ol { list-style: none; }
a { text-decoration: none; }
q:before, q:after { content: ' '; }
legend { color: # 000; }
table { border-collapse: collapse; border-spacing: 0; }
button, textarea { font-size: 100%; border: 0; }
fieldset, img { border: 0; }

a:hover { -webkit-transition: all .5s; transition: all .5s; }

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* common
   ========================================================================== */
.fl { float: left; *display: inline; _display:inline; }
.fr { float: right; *display: inline; _display:inline; }
.clearfix:after { display: block; clear: both; content: ' '; visibility: hidden; height: 0; } .clearfix { *zoom: 1; } /* Grid system, Mobile equipment priority = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = * /. Container {margin - left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .container-fluid { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .row { margin-left: -15px; margin-right: -15px; } .row:before, .row:after { content:""; display: table; clear: both; } .hide-xs { display: none! important; } .show-xs-block { display: block! important; } .show-xs-inline { display: inline! important; } .show-xs-inline-block { display: inline-block! important; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left; }.col-xs-1 {width: 8.33333333%; }.col-xs-2 {width: 16.66666667%; } .col-xs-3 { width: 25%; }.col-xs-4 {width: 33.33333333%; }.col-xs-5 {width: 41.66666667%; } .col-xs-6 { width: 50%; }.col-xs-7 {width: 58.33333333%; }.col-xs-8 {width: 66.6666666667%; } .col-xs-9 { width: 75%; }.col-xs-10 {width: 83.33333333%; }.col-xs-11 {width: 91.66666667%; } .col-xs-12 { width: 100%; }.col-xs-offset-1 {margin-left: 8.33333333%; }.col-xs-offset-2 {margin-left: 16.66666667%; } .col-xs-offset-3 { margin-left: 25%; }.col-xs-offset-4 {margin-left: 33.33333333%; }.col-xs-offset-5 {margin-left: 41.66666667%; } .col-xs-offset-6 { margin-left: 50%; }.col-xs-offset-7 {margin-left: 58.33333333%; }.col-xs-offset-8 {margin-left: 66.66666667%; } .col-xs-offset-9 { margin-left: 75%; }.col-xs-offset-10 {margin-left: 83.33333333%; }.col-xs-offset-11 {margin-left: 91.66666667%; } .col-xs-offset-12 { margin-left: 100%; } @media screen and (min-width: 768px) { .container { width: 750px; } .hide-sm { display: none! important; } .show-sm-block { display: block! important; } .show-sm-inline { display: inline! important; } .show-sm-inline-block { display: inline-block! important; } .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: left; }.col-sm-1 {width: 8.33333333%; }.col-sm-2 {width: 16.66666667%; } .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.66666667%; } .col-sm-9 { width: 75%; }.col-sm-10 {width: 83.33333333%; }.col-sm-11 {width: 91.66666667%; } .col-sm-12 { width: 100%; }.col-sm-offset-1 {margin-left: 8.33333333%; }.col-sm-offset-2 {margin-left: 16.66666667%; } .col-sm-offset-3 { margin-left: 25%; }.col-sm-offset-4 {margin-left: 33.33333333%; }.col-sm-offset-5 {margin-left: 41.66666667%; } .col-sm-offset-6 { margin-left: 50%; }.col-sm-offset-7 {margin-left: 58.33333333%; }.col-sm-offset {margin-left: 66.66666667%; } .col-sm-offset-9 { margin-left: 75%; }.col-sm-offset {margin-left: 83.33333333%; }.col-sm-offset {margin-left: 91.66666667%; } .col-sm-offset-12 { margin-left: 100%; } } @media screen and (min-width: 992px) { .container { width: 970px; } .hide-md { display: none! important; } .show-md-block { display: block! important; } .show-md-inline { display: inline! important; } .show-md-inline-block { display: inline-block! important; } .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left; }.col-md-1 {width: 8.33333333%; }.col-md-2 {width: 16.66666667%; } .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.66666667%; } .col-md-9 { width: 75%; }.col-md-10 {width: 83.33333333%; }.col-mD-11 {width: 91.66666667%; } .col-md-12 { width: 100%; }.col-md-offset-1 {margin-left: 8.33333333%; }.col-md-offset-2 {margin-left: 16.66666667%; } .col-md-offset-3 { margin-left: 25%; }.col-md-offset-4 {margin-left: 33.33333333%; }.col-md-offset-5 {margin-left: 41.66666667%; } .col-md-offset-6 { margin-left: 50%; }.col-md-offset-7 {margin-left: 58.33333333%; }.col-md-offset-8 {margin-left: 66.66666667%; } .col-md-offset-9 { margin-left: 75%; }.col-md-offset-10 {margin-left: 83.33333333%; }.col-md-offset-11 {margin-left: 91.66666667%; } .col-md-offset-12 { margin-left: 100%; } } @media screen and (min-width: 1200px) { .container { width: 1170px; } .hide-lg { display: none! important; } .show-lg-block { display: block! important; } .show-lg-inline { display: inline! important; } .show-lg-inline-block { display: inline-block! important; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {float: left; }.col-lg-1 {width: 8.33333333%; }.col-lg-2 {width: 16.66666667%; } .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.6666666667%; } .col-lg-9 { width: 75%; }.col-lg-10 {width: 83.33333333%; }.col-lg-11 {width: 91.66666667%; } .col-lg-12 { width: 100%; }.col-lg-offset-1 {margin-left: 8.33333333%; }.col-lg-offset-2 {margin-left: 16.66666667%; } .col-lg-offset-3 { margin-left: 25%; }.col-lg-offset {margin-left: 33.33333333%; }.col-lg-offset-5 {margin-left: 41.66666667%; } .col-lg-offset-6 { margin-left: 50%; }.col-lg-offset-7 {margin-left: 58.33333333%; }.col-lg-offset-8 {margin-left: 66.66666667%; } .col-lg-offset-9 { margin-left: 75%; }.col-lg-offset {margin-left: 83.33333333%; }.col-lg-offset {margin-left: 91.66666667%; } .col-lg-offset-12 { margin-left: 100%; }}Copy the code

Responsive picture

Finally, let’s talk about responsive graphics

Generally speaking, the same banner needs to use a large image on the computer, but it is good to use a small image on the mobile phone, otherwise it will cause problems such as slow loading on the mobile phone and waste of traffic, so the responsive image comes into being. How does that work?

1. css3 media query

One way is to use backound-image in conjunction with a media query, as shown below:

.banner{
  background-image: url(/static/large.jpg);
}

@media screen and (max-width: 767px){
  background-image: url(/static/small.jpg);
}Copy the code

The downside of this approach is that it is less SEO friendly, since you can also write an Alt attribute if you use the IMG tag.

2. The picture TAB

Picturefill.min.js: indicates that the browser such as Internet Explorer does not support the picturefill

<picture>
    <source srcset="banner_w1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_w800.jpg" media="(max-width: 800px)">
    <img src="banner_w800.jpg" alt="">
</picture>

<! -- picturefill. Min.js -- picturefill. Min.js -->
<script type="text/javascript" src="js/vendor/picturefill.min.js"></script>Copy the code

As above, if the page width is greater than 800px (PC), load the larger image and load the smaller image on the phone. In this way, the browser will only load one image from the source. But if it is inserted dynamically with JS, it will still load two, and only one if it is written in HTML to load the initial page.

For example, the onload event is triggered from the img tag. Picture and source do not layout. Their width and height are both 0.

In addition, using source, you can also do some compatible processing for the image format:

<picture>
    <source type="image/webp" srcset="banner.webp">
    <img src="banner.jpg" alt="">
</picture>Copy the code

Webp can be halved in size while maintaining the same clarity, but only Chrome supports it for now. Safari and Firefox are experimenting, so other browsers like Firefox will load JPG photos:

3. srcset

<img srcset="photo_w350.jpg 1x, photo_w640.jpg 2x" src="photo_w350.jpg" alt="">Copy the code

If the ppi of the screen is 1, it will load a 2x image, and if the DPI is 2, it will load a 2x image. Mobile phones and Macs generally have a DPI above 2, which will not waste traffic on a normal screen, but will provide a high-definition experience for the retina screen.

If the browser does not support srcset, the images in SRC are loaded by default.

But you’ll notice that this is not the case. Chrome on Mac loads the 2x image in srcset and loads the SRC image at the same time. All srcsets are loaded first, and then the SRC is loaded. This strategy is a bit odd as it loads two images, not two if you don’t write SRC, but it’s not as compatible. This is probably because the browser thinks that since there is srcset, there is no need to write SRC, and if SRC is written, the user might be useful. Picture doesn’t load two

There are other ways to make responsive images, which I won’t analyze because I haven’t used them before.

The above.