Generally speaking, do THE PC side of the page is not like the mobile side of the resolution and screen size have particularly strong requirements, but for the large screen of data display page, it is necessary to consider the adaptation scheme, after all, as far as possible to ensure that most of the mainstream display can be displayed normally.

Most monitors on the market are almost 16:9, or 1920 by 1080 resolution.

Desired effect

  • When the screen size ratio is just 16:9, pages can be displayed in full screen, filling the monitor with content

  • When the screen size ratio is less than 16:9, the top and bottom of the page should be blank, and the left and right sides should be full and the top and bottom should be centered. The display ratio should be 16:9

  • When the screen size ratio is greater than 16:9, the left and right of the page is blank, the top and bottom are full and center, and the display ratio remains 16:9

When the screen size changes, dynamically calculate the size of the display proportion of the middle content, to ensure that the content is always 16:9

The solution

rem

Rem (font Size of the root Element) is a new unit of size in CSS3, that is, the size relative to the font size value of the root element.

The idea is to dynamically calculate the fontsize of the page and change the rem size.

Train of thought

Take a standard screen size of 1920 by 1080. Divide the screen into 10 parts and calculate the rem reference value first: 1920/10 = 192, then convert the original PX units of all elements such as length, width, position and font size into REM, and use JS to calculate the width of the current browser after the page is loaded. And set the HTML font size to (the width of the current browser window / 10), so that 10rem is exactly the width of the browser window. Also can ensure 100% width, such as the scale of the page design draft.

Two things:

  1. Get the reference value of REM. The default container width is 1920 * 1080, and the rem value is calculated using 1920/192
  2. Page to write a section of JS code, dynamic calculationFont size of the HTML root element

implementation

Standing on the shoulders of giants, we don’t have to go from zero to one to fulfill two requirements.

On the first point:

  • First installation@njleonzhang/postcss-px-to-remThis package
npm i @njleonzhang/postcss-px-to-rem -D
Copy the code
  • new.postcssrc.jsThe configuration file
module.exports = { plugins: { autoprefixer: {}, "@njleonzhang/postcss-px-to-rem": { unitToConvert: 'px', // (String) The unit to convert. The default is px. WidthOfDesignLayout: 1920, // (Number) The width of the design layout. UnitPrecision: 3, // (Number) The decimal Number to which REM units are allowed to grow. SelectorBlackList: ['.ignore', '.hairlines'], // (Array) The selector to ignore and keep as px. MinPixelValue: 1, // (Number) Sets the minimum pixel value to replace. False // (Boolean) Allow converting px in media queries.}}}Copy the code
  • Once configured, the px on the page will be converted to REM

On the second point:

  • Create a rem.js file and import it in the entry to dynamically calculate font size

    (function init(screenRatioByDesign = 16 / 9) {
  let docEle = document.documentElement
  function setHtmlFontSize() {
    var screenRatio = docEle.clientWidth / docEle.clientHeight;
    var fontSize = (
      screenRatio > screenRatioByDesign
        ? (screenRatioByDesign / screenRatio)
        : 1
    ) * docEle.clientWidth / 10;
    docEle.style.fontSize = fontSize.toFixed(3) + "px";
    console.log(docEle.style.fontSize);
  }
​
  setHtmlFontSize()
​
  window.addEventListener('resize', setHtmlFontSize)
})()
Copy the code

At this point, the page is ready for 16:9 adaptation

Link – https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html#%E6%80%BB%E7%BB%93

Github.com/njleonzhang…

Github.com/QuellingBla…

Github.com/QuellingBla…