Mobile responsive layout

reference

Differences between the Mobile Web and the PC Web

• PC layout

If the browser width is smaller than min-width, scroll directly. And the other one is white space. Set the width of the page to a base width, leaving the rest of the page white.

In order to make mobile web like native App, H5 technology was developed and Hybird was further derived. Although not as good as App performance, Hybird has an absolute advantage in hot update, which cannot be replaced by native App.

Hybrid App:

Mixed-mode mobile apps refer to apps between Web App (shell) and Native App (Native), which have both “advantages of good user interaction experience of Native App” and “advantages of cross-platform development of Web App”.

advantages

1. The threshold is low. As long as you understand the front end of the three major components, you can develop, do not need to master Android, IOS knowledge. A MUI framework like the one I used in my development, coupled with the Hbuilder IDE, is a boon for newcomers to Hybrid App development.

2. Speed is fast. If the application of HTML, CSS, JS code accounted for a large proportion, then, writing application interface and web writing is no different, very fast. Cross-platform. One set of code for multiple platforms, no need to prepare multiple sets of code for multiple platforms. Of course, the adaptation and experience are certainly not as good as Native, but if the code is written well, in fact, the adaptation and experience on mainstream models are also good.

disadvantages

1. Development difficult. This means that in the later stage, the complexity of the entire APP, and compatibility for multiple types of business modules, information transmission, etc. Development costs at this point are even higher than pure Native apps.
2. Experience is poor. Hybrid apps are never Native apps. As far as the current technology is concerned, Hybrid App still lags behind Native App in terms of adaptation, experience and underlying call. In fact, most Native apps rely heavily on the bottom layer and use Native API for interface, which is of course more efficient than Hybrid apps.

Solution 1: Media query

/* iphone 5 */
@media screen and (max-width: 320px) {
    body {
      background-color: red; }}/* iphone6 7 8 plus */
@media screen and (min-width: 414px) {
    body {
      background-color: blue; }}Copy the code

Solution 2: Percentage layout

The grid system in Bootstrap uses percentages to define the width and height of elements. CSS3 supports maximum and minimum heights. Percentages and Max (min) can be used together to define the width and height of elements on different devices.

/* pc width > 1100px */
html.body { margin: 0;padding: 0;width: 100%;height: 100%; }aside {
    width: 10%;
    height: 100%;
    background-color: red;
    float: left;
}
main {
    height: 100%;
    background-color: blue;
    overflow: hidden;
}
/* iphone6 7 8 plus */
@media screen and (max-width: 414px) {
    aside {
      float: none;
      width: 100%;
      height: 5%;
      background-color: yellow;
    }
    main {
      height: calc(100vh - 5%);
      background-color: red; }}Copy the code

Solution 3: REM layout

REM is a new addition to CSS3 and has high mobile support. The rem unit is determined by the font size of the root element. The font size of the root element provides a baseline. When the page size changes, you only need to change the value of font size, and then the size of the element with rem as the fixed unit will also change.

Therefore, if rem is used to achieve a responsive layout, you only need to dynamically change the font size according to the size of the view container (em is relative to the parent element).

Rem responsive layout idea:

• It is generally not desirable to set specific widths for elements, but you can set specific widths for small ICONS
• The height value can be set to a fixed value, how big the design is, we are strict with how big
• All set fixed values are usedremDo units (first set a reference value in HTML:pxandremThe corresponding proportion, and then obtain in the effect drawingpxThe value of the layout is converted toremValue)
• Js gets the real screen width (document.body.clientWidth), divide it by the width of the design draft, calculate the scale, and re-set the previous reference value according to the scale, so that the project can be adaptive on the mobile terminal

Disadvantages of the REM layout:

In a responsive layout, the font size of the root element must be dynamically controlled through JS, which means that the CSS style and JS code have some coupling, and the code that changes font size must be placed before the CSS style.

The REM layout is also by far the best way to fit multiple screens. By default our HTML tag font size is 16px, we use media query to set the font size for different devices.

/* pc width > 1100px */
html{ font-size: 100%; }// The font here is 16px=1rem
body {
    background-color: yellow;
    font-size: 1.5rem;
}
/* ipad pro */
@media screen and (max-width: 1024px) {
    body {
      background-color: #FF00FF;
      font-size: 1.4rem; }}Copy the code

Solution 4: Viewport unit

Css3 introduced a new unit vw/vh related to the view window, vw denotes the width relative to the view window, vh denotes the height relative to the view window, in addition to vw and Vh, there are two related units vmin and vmax.

The specific meanings of each unit are as follows:

V sub w or vh is very similar in percentage units. The difference between VW and % is:

There are two ways to implement responsiveness using viewport units:

1. Use vw as the CSS unit only

• For converting the dimensions of the design to units, we compile using the Sass function

  // The size of the iPhone 6 was used as a baseline for the design draft
  $vm_base: 375; 
  @function vw($px) {
      @return ($px / 375) * 100vw;
  }
  Copy the code

Use VW for text, layout width, spacing, and so on

2. Pair with a VW and REM

Picture response

Image responsiveness includes two aspects. One is size adaptation, which allows images to compress and stretch under different screen resolutions.

One is to choose images with as high resolution as possible depending on the screen resolution and pixel ratio of the device. That is, when high-definition images or large images are not needed on a small screen, we can use small images instead to reduce network bandwidth.

1. Use max-width image adaption

Image adaptation means that the image can be scaled to match the size of the container, using the following code:

img {
    display: inline-block;
    max-width: 100%;
    height: auto; // 等比缩放
}
Copy the code

Why not use width: 100%?

Because this rule causes it to appear as wide as its container. In cases where the container is much wider than the image, the image is stretched unnecessarily.

2. Use srcset

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

If the dPI of the screen is 1, the 1x image will be loaded, while the DPI of the screen is 2, the 2x image will be loaded. Basically, the DPI of mobile phones and Macs is above 2, which will not waste traffic for the ordinary screen, and the HD experience for the retina screen.

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

A small summary

The responsive layout can be realized by media query + PX, media query + percentage, media query + REM + JS, VM/VH, VM/VH + REM.

• Media query is difficult to adapt to the device, and the interactive experience is not friendly.

• Percentage calculation trouble;

• Rem couples CSS and JS together;

• The CSS viewports are not compatible.

The forming scheme of responsive layout

• Flex elastic layout, poor compatibility
• Grid Poor compatibility with the Grid layout
• Columns grid systems often rely on a UI library such asBootstrap