Detailed explanation of REM adaptation scheme and viewport adaptation in HTML5

Time:2021-9-26

H5 terminal REM adaptation scheme and viewport adaptation

rem

Rem is a new relative unit (root em, root EM) in CSS3
Only according to the font size setting of the current HTML page. If the font size of the root directory is 18px, 1rem = 18px

Media query settings


@media screen and (min-width: 320px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 37.5px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 41.4px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75px;
  }
}

Dynamic modification using JS

<script>
  //Adjust the font size of HTML according to the screen size
  function setHtmlFontSize() {
    const width = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = width / 10 + "px";
  }
  //Initialization
  setHtmlFontSize();
  //Monitor screen size change events
  window.addEventListener("resize", setHtmlFontSize);
  //Monitor screen flip events
  window.addEventListener("orientationchange", setHtmlFontSize);
</script>

viewport

The adaptation of each size of the mobile end is realized by scaling

The adaptation scheme dynamically creates the mate viewport property and dynamically sets the zoom value according to the current screen size

Viewport properties

attribute explain remarks
width Defines the width of the viewport in PX A positive integer or device width string
height Defines the height of the viewport in PX A positive integer or device height string
initial-scale Defines the ratio between the dip width of the device and the viewport size A positive number between 0.0 and 10.0
maximum-scale Define the maximum scaling value, which must be greater than or equal to the value of minimum scale A positive number between 0.0 and 10.0
minimum-scale Define the minimum scaling value, which must be less than or equal to the maximum scale value A positive number between 0.0 and 10.0
user-scalable A Boolean value indicating whether the user can zoom the page Yes or no

Use js to set viewport properties dynamically

Principle: adjust the width of all device layout viewports to the width of the design drawing by setting the initial scale related properties of the viewport

//Define the width of the design draft as 375
const DESIGN_WIDTH = 375;
//The mobile terminal adaptation is achieved by setting the initial scale value of content in the meta element
const setViewport = function () {
  //Calculate the width of the current screen and the proportion of the design
  let scale = window.screen.width / DESIGN_WIDTH;
  //Get element
  let meta = document.querySelector("meta[name=viewport]");
  let content = `width=${DESIGN_WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`;
  //Determine whether it already exists
  if (!meta) {
    meta = document.createElement("meta");
    meta.setAttribute("name", "viewport");
    document.head.appendChild(meta);
  }
  meta.setAttribute("content", content);
};
setViewport();
//Monitor screen change events
window.addEventListener("resize", setViewport);
//Monitor screen flip events
window.addEventListener("orientationchange", setViewport);

This is the end of this article on the detailed explanation of REM adaptation scheme and viewport adaptation in HTML5. For more relevant HTML5 REM adaptation content, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!