Rem + PxCook: Adaptive layout solutions for the New era

This is the 18th day of my participation in Gwen Challenge.

Introduction to 👽

The adaptation of pages of various sizes has always been a big problem for every front-end developer. In order to solve this problem, there are many solutions: 1. Percentage layout; 2. Media inquiry; 3. Vw/VH layout; 4. Transform scale; 5. Em layout; 6. Rem layout, etc. These schemes have their merits, but none is perfect. To mention the most widely used of these, the REM layout is the first.

In traditional REM layout scheme, after introducing REM transformation method, pXtoREM plug-in is needed to do post-transformation processing for units in the project. Is there a way to enter rem units for name at development time without having to convert them later? The answer is pxCook.

👽 rem layout

Before introducing PxCook, let’s review rem.

👻 principle

The trouble with traditional PX layouts is that 1px is the same size on both large and small screens. As a result, a 1000px box that works fine on a larger screen will not fit or be misplaced on a smaller one.

Among the various schemes exploring responsive processing, except for media query and transform, the nature of other schemes is still related to percentages. Think about it. Big screens and small screens are different in width and length, but if we divide them into equal parts, each with the same content, isn’t that what we want? To translate this into a mathematical formula:

How to dynamically set up REM for different screen sizes becomes the key to solve the next step.

👻 Dynamic REM implementation

The following is a step-by-step analysis of the simple flexibility.js implementation process:

// Create an immediate function to dynamically set rem
(function flexible() {
  // Get the root element
  let docEl = document.documentElement;
  // Get the device's DPR, which is the ratio of physical pixels to virtual pixels under the current setting
  let dpr = window.devicePixelRatio || 1;

  // Set rem dynamically
  function setRemUnit() {
    // The number of copies is defined as 48
    // Set the root element's fontSize = its clientWidth / 4 + 'px' = 1rem
    let rem = docEl.clientWidth / 48;
    docEl.style.fontSize = rem + "px";
  }
  setRemUnit();

  // Refires when the page is displayed or resized
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow".e= > {
    e.persisted && setRemUnit();
  });

  // Check support for 0.5px, root element class has hairlines
  if (dpr >= 2) {
    let fakeBody = document.createElement("body");
    let testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})();
Copy the code

👻 vue project introduction

Import it directly from main.js:

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './utils/flexible';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h= > h(App),
}).$mount('#app');

Copy the code

👽 pxcook

Pxcook is an essential collaborative development tool for the front-end, which can automatically annotate design drawings and generate front-end code. Here we mainly use its automatic annotation function.

👻 Basic use

🙋 Select the Web project when importing the PSD design into pxcook:

🙋 Check the px width of the draft and switch to rem unit setting cardinality (Cardinality = px width of the draft/’ several copies’). For example, 1920px is divided into 48 parts, and the name base is 40px

At this point, you can get its REM size and write it directly into the project. It is also possible to copy automatically generated CSS code (with about 80% accuracy).

👽 epilogue

Iron juice, if there is a better way, welcome to friendly exchange ~