Takeaway:

Front-end development is bound to encounter multi-terminal adaptation, with the same effect on devices of different resolutions. Common methods are media query, percentage, REM, vw/ vH, how developers use the above methods in the common px unit situation, please see the text.

I. Related concepts

1. Px and viewport

Px is a common unit for developers to develop, such as width, height and clearance. But if you think about it, it should be clear that PX is different from common units, such as centimeters/meters and other fixed units.

If we set the text to 16px on the PC, on the mobile, it may become very, very small.

To clarify this concept, let’s first introduce pixels and viewports

1.1 Pixel Concept

Pixels are the basis of web layout. A pixel represents the smallest unit that a device can display. Pixels are divided into physical pixels and CSS pixels

  • CSS pixels are abstract units for developers
  • It only depends on the device itself, and the pixels of each device itself are fixed

How do physical pixels translate to CSS pixels? Let’s look at the viewport concept

1.1 Viewport concept

Viewport is divided into broad sense and narrow sense, broad sense is the browser display content screen area, narrow sense is divided into the following several: layout, vision, ideal

1.1.1 Layout ViewPort

In the case of PC web pages, the default size is 980px. If the viewPort is not set, PC pages displayed on mobile devices will be based on the default size. If the default size is displayed on mobile devices, it will be blurred

1.1.2 Visual ViewPort

Represents the browser to see the site area, users can zoom in and out to view the contents of the web page, thereby changing the size of the visual port, equivalent to taking a magnifying glass to observe. Therefore, visual this does not affect the actual height and width of the layout viewport

1.1.3 Ideal Viewport

In a word, an ideal viewport is the best layout viewport for a given physical pixel. In other words, get the best layout viewports for mobile devices.

In order to get the best layout of the viewport on the mobile end, the viewPort tag is used for control

<meta id="viewport" name="viewport" content="width=device-width; Initial - scale = 1.0; maximum-scale=1; user-scalable=no;">
Copy the code

The main property is width in the content. To adapt to the mobile layout, you need to set it to device-width, which usually means wide resolution. This setting makes the mobile layout ideal for viewing.

1.2 Pixel ratio of DPR device
1 DPR = Physical pixels/resolutionCopy the code

Without scaling, 1CSS corresponds to 1DPR

1 CSS pixel = Physical pixel/resolutionCopy the code
1.3px, adaptive

With the viewport meta tag above, we have set the layout to the desired viewport when 1CSS pixel can be represented as

1CSS = Physical pixels/resolutionCopy the code

Under the PC layout viewport, it is usually 980px. On the mobile terminal, taking iphone6 as an example, the resolution is 375 * 667. Now there is a 750px * 1134px visual image on the PC:

1CSS = 750/980 = 0.76pxCopy the code

On mobile:

1CSS = 750 / 375 = 2 px
Copy the code

It is obvious that each CSS pixel on the mobile and PC ends corresponds to a physical pixel. If only one CSS set of PX is used as a unit, it is impossible to display the same style on each end. Here are a few ways to get the same effect.

Ii. Media inquiries

If one set of styles does not work, can we give each device a different set of styles to achieve adaptive effects?

The answer is yes

With @media media queries, different styles can be defined for different media types, especially for responsive pages, and multiple styles can be written for different screen sizes to achieve adaptive effects. For example:

@media screen and (max-width: 960px){
    body{
      background-color:#FF6699
    }
}

@media screen and (max-width: 768px){
    body{
      background-color:#00FF66;
    }
}

@media screen and (max-width: 550px){
    body{
      background-color:#6633FF;
    }
}

@media screen and (max-width: 320px){
    body{
      background-color:#FFFF00;}}Copy the code

The downside of media queries is that if there are too many styles that need to be changed as the browser sizes change, then multiple sets of style code can be cumbersome.

3. Percentage

In addition to using px and media queries to achieve a responsive layout, we can also use the percentage unit “%” to achieve a responsive effect.

For example, when the width or height of the browser changes, the percentage unit allows the width and height of the components in the browser to change with the browser, thus achieving a responsive effect.

Whose percentage (%) is a child element in CSS?

1 percent specific analysis

1.1 Percentage of height and width

A percentage is used in the height or width of a child element relative to its immediate parent, width relative to its parent, and height relative to its parent.

Top and bottom, left and right

The top and bottom of child elements, if set to percentages, are the == height == of the parent element relative to the direct non-static positioning (the default positioning).

Similarly, the left and right of child elements, if set to percentages, are the == width == of the parent element relative to the direct non-static positioning (the default positioning).

1.3 the padding/margin

The padding of the child element, if set in percentage, is relative to the width== of the parent element, regardless of the height== of the parent element. Margin is the same as padding

2. Percentage disadvantages

  • The calculation is difficult, if we want to define the width and height of an element, according to the design draft, must be converted into percentage units.
  • As you can see from Section 1, when percentages are used in each attribute, the attribute relative to the parent element is not unique. For example, width and height are relative to the width and height of the parent element, while margin and padding are relative to the width of the parent element in both vertical and horizontal directions, and border-radius is relative to the element itself. Therefore, the use of percentage units tends to complicate the layout problem

Four, rem

1 REM unit conversion

Rem units are only font-size relative to the browser’s root element (the HTML element), regardless of the nesting level. By default, the font size of an HTML element is 16px, so:

1 rem = 16px
Copy the code

Dynamic adaptation can be achieved by changing the HTML font size

2 rem2px, px2rem

One problem is that when developing, the unit uses REM, while designers usually use PX for design, developers use REM for development, which is extremely uncomfortable, although font size conversion is possible.

There is a solution, is also using PX development, with the Webpack loader for translation

2.1 Directly Use loader
npm install px2rem-loader
Copy the code

The configuration file

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.css$/,
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'px2rem-loader',
        // options here
        options: {
          remUni: 75,
          remPrecision: 8
        }
      }]
    }]
  }
Copy the code
2.1 Use webPack plug-ins
npm install postcss-loader
Copy the code

In the Webpack plugin:

var px2rem = require('postcss-px2rem');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader! css-loader! postcss-loader"
      }
    ]
  },
  postcss: function() {
    return[px2rem({remUnit: 75})]; }}Copy the code

3 rem shortcomings

In a responsive layout, you must dynamically control the font size of the root element with JS.

Fifth, through VW/VH to achieve self-adaptation

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.

unit meaning
vw The window width is 100vw relative to the window width
vh The window height is 100vh relative to the window height
vmin Smaller values in VW and Vh
vmax Larger values in VW and VH

Relevant conversions, such as 375 resolution devices

1px is 1/375 times 100 vwCopy the code

Postcss can also be preprocessed through the corresponding plug-in, CSS to do an automatic conversion, can automatically convert PX to VW.

var defaults = {
  viewportWidth: 320,
  viewportHeight: 568, 
  unitPrecision: 5,
  viewportUnit: 'vw',
  selectorBlackList: [],
  minPixelValue: 1,
  mediaQuery: false
};
Copy the code

Px can be converted to VW by specifying the width and height of the window, as well as the conversion accuracy. For example, 375

Vw/VH scheme has some problems due to browser compatibility, so it is only understood for the time being.