This is the seventh day of my participation in the First Challenge 2022, for more details: First Challenge 2022 “.

Beginning 1.

As for the understanding of pixels and implementation schemes in the first two sections, we have summarized the conversion schemes of PX + REM, PX + VW and REM + VW modes. In this section, I plan to combine these three modes with project practice.

First of all, we need to understand that there is always a fixed px design (750xauto), or some designers use a direct double (375xauto). Then convert px to REM adaptation or VW adaptation.

2. px+vw

This is the most recommended way on the Internet

1. Create a VUE project

npm i @vue/cli -g
vue create px-vw
Copy the code

2. Install postCSs-px-to-viewport to easily convert PX to VW

    npm i postcss-px-to-viewport --save-dev
Copy the code

3. Configure the postcss-px-to-viewPort plug-in to run the configuration file. Postcsrc

module.exports = {
  plugins: {
    autoprefixer: {}, -webkit-, -moz-, etc
    "postcss-px-to-viewport": {
      unitToConvert: "px".// The unit to convert
      viewportWidth: 750.// Width of UI design draft
      unitPrecision: 4.// The precision of the conversion, i.e. the number of decimal places
      propList: ["*"].// Specify the unit of the CSS property to be converted. * indicates that all CSS properties are converted
      viewportUnit: "vw".// Specify the window unit to convert to, default vw
      fontViewportUnit: "vw".// Specify the window unit to convert the font to, default vw
      selectorBlackList: [""].// Specify the class name that is not converted to window units,
      minPixelValue: 1.// The default value is 1, and the conversion is not performed if the value is less than or equal to 1px
      mediaQuery: true.// Whether the media query is also converted in the CSS code, the default is false
      replace: true.// Whether to replace the attribute value directly after conversion
      exclude: [/node_modules/].// Sets the file to be ignored and the re to match the directory name
      landscape: false.// Whether to handle landscape,}}};Copy the code

4. Writing in app.vue is simple and suitable for the environment

<template>
  <div class="app">
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</template>

<script>
export default {};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.app {
  width: 750px;
  height: 1000px;
  background: red;
}
.header {
  width: 400px;
  height: 200px;
  background: black;
}

.content {
  width: 300px;
  height: 200px;
  background: yellow;
}

.footer {
  width: 200px;
  height: 200px;
  background: gray;
}
</style>

Copy the code

375 x auto 540 x auto

5. Conclusion This pattern is very simple to implement

3. px+rem

For REM we know how many multiples are relative to the root node, so we just need to set font size on the root node to the logical pixel px of the real device width, and then write everything relative to the root node to how many times REM

1. Convert the font size of the root node according to the screen

Font :14px font-size:14px

then

FontSize = 14 * (width / 375) + "px";

2. Change the responsive root node calculation based on screen changes

// Base size
const baseSize = 28;
// Set the rem function
function setRem() {
  // The zoom ratio of the current page width to 750 width can be modified according to your needs.
  const proportion = document.documentElement.clientWidth / 750;
  // Set the font size at the root of the page
  document.documentElement.style.fontSize = baseSize * proportion + "px";
}
/ / initialization
setRem();
// Resets rem when changing the window size
window.onresize = function () {
  setRem();
};

Copy the code

3.px-rem

After the operation of Step 2, we set the exact root node font-size, so the next operation

After the operation of Step 3, we automatically set the value of the root node, and then the page can use REM to write the code, but the design drawing is 750px format, and all the measured sizes need to be calculated and written into REM, which is obviously not acceptable. So we also need to scale 28px to 1rem, and we set the base at 750 dimensions, 28px (real logical resolution 375, 14px).

4. Install postcss – pxtorem

    npm install postcss-pxtorem -D
Copy the code

5. Configuration. Postcssrc. Js

Specific parameter meaning can refer to the above said px+ PW adaptation there are explanations

module.exports = {
  plugins: {
    autoprefixer: {}, -webkit-, -moz-, etc

    "postcss-pxtorem": {
      rootValue: 28.propList: ["*"],}}};Copy the code

Summary: At this time, the transformation has been successful, PX is scaled to REM, and THE rem root node is configured with logical pixels to PX

4.rem+vw

This mode is mainly to solve compatibility problems, and it may cause compatibility problems if the solution is always changed to VW. At this time, we need to make a patch, which is equivalent to adding a layer of font-size and specific PX Settings before setting VW. For specific calculation, please refer to my last article.

html {
    font-size: 13.33333vw;
}

@media screen and (max-width: 300px) {
  html {
    font-size: 40px;// Based on real screen logical pixels
    font-size: 13.33333vw;
  }
}

@media screen and (min-width: 300px) and (max-width: 400px) {
  html {
    font-size: 53.32px;// Based on real screen logical pixels
    font-size: 13.33333vw; }}Copy the code

In this way, the rem calculation is successful, and then the consistent transformation of PX into REM is all that is needed in scheme 2, which I think is relatively perfect.