Set meta tag name=”viewport”

Set the viewPort TAB to tell the browser to use the width of the device as the view width and to disable initial zooming.

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

Media Queries Media Queries

  • Media queries can define different styles for different media types (screen print)
  • Does the media query tell the browser how to render the page for different widths based on the criteria

code

/ /* iphone6 7 8 plus */ @media screen and (min-width: 414px) { body { background-color: blue; } } /* ipad */ @media screen and (min-width: 768px) { body { background-color: green; }} /* PC width > 1024px */ body {background-color: yellow; } /* ipad pro */ @media screen and (max-width: 1024px) { body { background-color: #FF00FF; }}Copy the code

Percentage layout

  • Border-radius, the percentage of translate, is relative to itself
  • The padding, the percentage of marigin, whether vertical or horizontal, relative to the width of the immediate parent element
  • height, width; top, bottom; Left, right, both relative to the immediate parent

disadvantages

Percentages are used for each attribute, and the attribute relative to the parent element is not unique. The percentage layout is complicated.

Rem layout

What are EM and REM

  • Em: Font size relative to the parent element
  • Rem: When rem is used to set the font size for an element, this refers to the font size relative to the HTML root element.

Essentials of REM layout

  1. Font size for the root element provides a baseline, while other elements define their size in fixed units of REM.
  2. You need to change the root element font size dynamically based on the size of the view container, and other elements will also change in response.
  3. Write JS code before CSS styling to dynamically control the font size of the root element.

code

Add resize event listener, callback function can change rem size

function refreshRem() {
    var docEl = doc.documentElement;
    var width = docEl.getBoundingClientRect().width;
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
}
win.addEventListener('resize', refreshRem);
Copy the code

Use media query to set font size in rem for devices of different sizes

/* ipad pro */ @media screen and (max-width: 1024px) { body { background-color: #FF00FF; The font - size: 1.4 rem; }}Copy the code

Viewport unit

unit meaning
vw Relative to the width of the window, 1vw is equal to 1% of the viewport width, i.e. the window width is 100vw
vh Relative to the window height, 1vh is equal to 1% of the viewport height, i.e. the window height is 100vh
vmin Smaller values in VW and Vh
vmax Larger values in VW and VH

Use VW as the CSS unit

Picture response

Use Max – width

img { display: inline-block; // The element is rendered inline relative to the surrounding content, but the width and height can be set. Max-width: 100%; height: auto; // Make sure the image is proportionally scaled without distortion}Copy the code

Max-width Ensures that the maximum image width is 100% of its container. If the image is larger than its container, the image is scaled to take up the maximum available space.

Cannot use width: 100%. This rule causes it to always display the same width as the container. In cases where the container is much wider than the image, the image is stretched indefinitely.

Using background image

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

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

Molding solutions

  • Flex Flex layout
  • Grid layout
  • Columns grid systems often rely on a UI library such as Bootstrap