What is responsive layout?

Responseive design: Responseive design is a website, a set of code can be displayed on all terminals, not a specific version for each terminal, Responseive design is born for mobile Internet browser.

Two, responsive design steps

2.1 viewPort Settings

Most mobile browsers use the width of the HTML page as a view of the viewable area to match the screen resolution, so we need to set the viewPort using meta to set the page width to the device width.

Add a meta tag to the head, set the width of the device as the view size, and disable zooming. The code is as follows:

<meta 
 name="viewport" 
 content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" 
/>
Copy the code

2.2 Media query

Media Queries: Media Queries are the core of responsive layout. The browser selects HTML and CSS content to be rendered based on the criteria. The width of various screen devices is divided into four main ranges.

Ultra-small Screen phone (<768px) Small screen tablet (≥768px) Medium screen desktop monitor (≥992px) Large screen large desktop display (≥1200px)

There are two import modes for media query: internal import and external import.

2.2.1 internal introduction

/ / @media screen and (max-width:768){} /* iPad */ @media screen and (min-width:768) and (max-width: 992px ){} /* @media screen and (min-width:992px) and (max-width:1200px){} /* @media screen and (min-width:1200px){}Copy the code

2.2.2 External introduction

/ / <link rel="stylesheet" media="screen and (max-width:768px)" /> /> /* stylesheet */ <link rel="stylesheet" media="screen and (min-width:768px) and (max-width:992px) (min-width:992px) and (max-width:1200px)" /> / <link rel=" heet" media="screen and (min-width:1200px)" />Copy the code

Note:

  • When using media queries, put the common style first and the media query code last.
  • When writing media queries, follow the screen Settings from small to large.
  • Use percentages for the width of the enclosing element.
  • Images tend to be distorted when scaled, so try adding a maximum or minimum width.

Examples of responsive layout

Eg: Make a list of display pictures, 4 pictures in a row on a large screen, 3 pictures in a row on iPad, 2 pictures in a row on mobile phone.

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta < span style>. List {width:100%; width:100%; max-width:1200px; padding:0; margin:0 auto; } .pic{ float:left; list-style:none; box-sizing: border-box; padding:10px; margin:15px 0px; } .picture{ width:100%; height:100px; background:#eaeaea; } @media screen and (max-width:768px) { .pic{ width:50%; } } @media screen and (min-width:768px) and (max-width:992px) { .pic{ width:33%; } } @media screen and (min-width:992px) { .pic{ width:25%; } } </style> </head> <body> <ul class="list"> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> <li class="pic"><div class="picture"></div></li> </ul> </body> </html>Copy the code

Changing the width of the browser after running will automatically change the layout of the image elements.

Bootstrap framework is based on the principle of media query. When we do responsive layout, we almost always use bootstrap framework to improve work efficiency.

Four, the advantages and disadvantages of response type

4.1 Advantages:

  • Flexible for different resolution equipment.
  • It can quickly solve the adaptive problem of multi-device display.

4.2 Disadvantages:

  • Responsive sites can’t differentiate between mobile devices, so they hide useless content, waste width, and take a long time to load. When a responsive layout uses a narrow screen on the mobile end, hidden content will still be loaded. High-quality pictures or videos will be loaded with low resolution. The same web page will be provided with different screen sizes.
  • Compatible with all terminals, heavy workload, low efficiency.
  • Only suitable for the layout, information, framework is not complex department type sites.
  • Responsiveness is a tragedy for older Versions of Internet Explorer. Responsive takes advantage of many new HTML5 features that are only supported by advanced browsers and are virtually invisible in IE6, 7, and 8.
  • Responsive design is not conducive to Baidu keyword optimization and ranking. Users have different search habits on different terminals, and Baidu’s keyword processing strategies for mobile terminals and PC terminals are also different. Baidu’s search rankings are also divided into PC and mobile terminals. Therefore, if you want to optimize, responsive layout is not recommended.

It is recommended that your website be made separately for mobile and PC, so that the site performance, user experience and retention will be much better. Big companies have stand-alone websites that rarely use responsive layouts.