What is CSS responsiveness?

Web pages display well on all sizes of devices. This is called “responsive design”. There are many solutions for responsive images, including JavaScript and CSS.

Responsive implementation scheme (CSS scheme)

  • 1. Media Query

Media query is to query devices according to certain conditions and make the devices that meet the conditions display the corresponding styles. In this way, different devices display different styles.

  • A simple demo:
<! DOCTYPE html> <html> <head> <meta charset="utf-8"< span style> @media (max-width: 768px){/*0~ 768px */ body{background: red; } } @media (max-width: 425px){ /*0~425*/ body{ background: yellow; } } @media (max-width: 375px){ /*0~375*/ body{ background: blue; } } @media (max-width: 320px){ /*0~320*/ body{ background: pink; }} @media (min-width: 769px){/*769~+∞*/ body{background: green; } } </style> </head> <body> </body> </html>Copy the code
  • Effect:

2. Percentage layout

A responsive effect is achieved by the percentage unit “%”. 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

  • Simple demo now:
// A simple demo, implement a 4:3 ratio of rectangular columns, not small depending on the window size 2 <div class="trangle"></div> .trangle{ height:0; width:100%; padding-top:75%; // The relative width is 75%}Copy the code

Where the padding of the child element is set as a percentage, either vertically or horizontally, relative to the width of the parent element, regardless of the height of the parent element.

  • Effect:

3, through REM to achieve responsive layout

  • The REM layout is also by far the best way to fit multiple screens

REM is a new unit of CSS3, and it is highly supported on mobile terminals. REM units are determined by the font size of the root HTML element, which provides a benchmark. When the page size changes, only the font size value needs to be changed. Then the size of the element with rem as the fixed unit will also change in response

  • Simple demo, using media query, set font size in different devices. :
<! DOCTYPE html> <html lang="en">
  <head>
    <meta charset="UTF-8"/> <title>Document</title> <style> /* pc width > 1100px */ html { font-size: 100%; } body { background-color: yellow; The font - size: 1.5 rem; } /* ipad pro */ @media screen and (max-width: 1024px) { body { background-color:#ff00ff;
          font-size: 4rem;
        }
      }
      /* ipad */
      @media screen and (max-width: 768px) {
        body {
          background-color: green;
          font-size: 3rem;
        }
      }
      /* iphone6 7 8 plus */
      @media screen and (max-width: 414px) {
        body {
          background-color: blue;
          font-size: 2rem;
        }
      }
      /* iphoneX */
      @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
        body {
          background-color: #0ff000;
          font-size: 1rem;
        }
      }
      /* iphone6 7 8 */
      @media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
        body {
          background-color: #0ff000;
          font-size: .5rem;
        }
      }
      /* iphone5 */
      @media screen and (max-width: 320px) {
        body {
          background-color: #0ff000;The font - size: 0.75 rem; }} < / style > < / head > < body > < h1 > rem layout < / h1 > < / body > < / HTML >Copy the code
  • Effect:

4. Viewport unit

According to CSS3 specification, viewport units mainly include the following four:

  • Vw: 1VW is equal to 1% of the viewport width
  • Vh: 1vh equals 1% of the viewport height
  • Vmin: Choose the smallest of vw and vH
  • Vmax: Pick the largest of vw and vH

Viewport units are different from % units. Viewport units are defined according to the percentage of viewport size depending on the size of the viewport. The % unit is dependent on the element’s ancestor.

Summary:

The above are the four commonly used response solutions, and then the specific problem specific treatment:

Reactive examples:

My own blog

Can switch to mobile mode and iPad mode in browser preview!

Reference article:

Principles and Solutions of Front-end Responsive Layout (Detailed Version)

Comparison of common solutions for responsive layouts (media query, percentage, REM, and VW/VH)