Here’s what you’ll learn from reading this article

1. What is thevwadapter
2. vwAdaptive compatibility
3. How to project H5 on mobilewebpackIntroduce into the buildvwadapter
4. The desert teachervwNote (PA) (Keng) (ZI) item (SHI) of installation dependence in adaptation solution
5. vwSuitable pit and climbing position
6. In actual developmentvwAdaptive applications

Background story

Recently took over an ancestral H5 project using REM adaptation solutions, but when I looked at CSS

        img.user-avatar
            position: absolute
            left: 50%
            top: - 5.4rem
            border: .125rem solid #FFAB74
            width4:.3125rem
            height4:.3125rem
            transform: translateX(- 50%)
            border-radius: 50%

        p.name
            margin-top: 0.1rem
            line-height: 0.4rem
            font-size: 0.28rem
            text-align: center
            color: # 333333
Copy the code

Here’s how I feel

After taking a deep breath and counting a few hairs that had just fallen off the table, I thought why not use the VW adaptation plan of Da Mo teacher to take me out of the pit. This article is the explanation of the plan

One. What isvwadapter

1.1 vwRelative to window width: Window width is100vw, i.e.,window.innerWidthSize, excluding the size of the taskbar title bar and the browser area on the bottom toolbar

1.2 <<CSS World >> author zhang Xinxu teacherView area related units VW, VH.. This section describes practical application scenarios

twovwAdaptive compatibility

2.1 you can useviewportPolyfill solution to perfect solution:postcss-viewport-unitsWith its good gay friendsviewport-units-buggyfill

2.1.1 principle

Postcss-viewport-units automatically adds content, viewport-units-buggyFill converts VW units to PX units according to the data in the content, as shown below

2.1.2 How to Use it

$ npm i -S viewport-units-buggyfill
Copy the code

const vub = require('viewport-units-buggyfill')

window.addEventListener('load', () => {
  vub.init({ hacks: window.viewportUnitsBuggyfillHacks })
})
Copy the code

/* Special processing of images */
img { 
  content: normal ! important; 
}
Copy the code

2.2 Scope of compatibility

2.3 Test Cases

Iii. How to project H5 on mobilewebpackIntroduce into the buildvwadapter

3.1 The original text link of Da Mo teacher

How to use VW for mobile adaptation in Vue project

3.2 Used by The Desert teacherpostcss pluginsAnd configuration instructions

3.2.1 What is itpostcss

Postcss is a platform that does not handle THE CSS itself, but allows you to operate on the CSS by integrating plug-ins on the platform.

3.2.2 corepostcss plugins: postcss-px-to-viewport

Convert px units to vw, VH, vmin, or vmax window units

// your-project/.postcssrc.js

module.exports = {
  "plugins": {
    // ...
    "postcss-px-to-viewport": {
    viewportWidth: 375.// The width of the window corresponds to the width of our design, which is usually 375
    viewportHeight: 667.// The window height can be specified according to the width of the 750 device. Generally, it can be specified as 667 or not
    unitPrecision: 3.// Specify the decimal number to convert 'px' to the window unit value (often not divisible)
    viewportUnit: 'vw'.// Specify the window unit to convert to. Vw is recommended
    selectorBlackList: ['.ignore'.'.hairlines'].// Specify a class that is not converted to Windows units. It can be customized and added indefinitely. It is recommended to define one or two common class names
    minPixelValue: 1.// less than or equal to '1px' does not convert to window units, you can also set to whatever value you want
    mediaQuery: false       // Allow conversion of 'px' in media queries
}
    // ...}}Copy the code

3.2.2 postcss-import

Solve @import import path problem with postCSS-URL to make it easier to import files

3.2.3 postcss-url

Handles files, such as image files, font files, and reference paths

3.2.4 autoprefixer

So you don’t need to consider any browser prefix when coding, you can concentrate on the code

3.2.5 postcss-cssnext

This plugin allows us to use future CSS features, which will be compatible with them

3.2.6 cssnano

Compress and clean up CSS code. In Webpack, CSsnano is bundled with CSS-Loader, so you don’t need to load it yourself. Remember to set postcss-zindex to false, otherwise the z-index value will be reset to 1

3.2.7 postcss-aspect-ratio-mini

Handles element container aspect ratios

3.2.8 postcss-write-svg

To deal with the mobile terminal 1px solution, the plug-in mainly uses border-image and background to do 1PX related processing

3.2.9 postcss-viewport-units

Add the content attribute to the CSS attributes and work with the Viewport-Units-BuggyFill library to fit VW, VH, Vmin, and vmax, which is the core compatibility plugin mentioned earlier

Four. Desert teacher VW adaptation program depends on the installation of note (PA) meaning (Keng) matter (ZI) item (shi)

npm i -D postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano
Copy the code

// your-project/.postcssrc.js
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 375.// (Number) The width of the viewport.
            viewportHeight: 667.// (Number) The height of the viewport.
            unitPrecision: 3.// (Number) The decimal numbers to allow the REM units to grow to.
            viewportUnit: 'vw'.// (String) Expected units.
            selectorBlackList: ['.ignore'.'.hairlines'].// (Array) The selectors to ignore and leave as px.
            minPixelValue: 1.// (Number) Set the minimum pixel value to replace.
            mediaQuery: false       // (Boolean) Allow px to be converted in media queries.
        }, 
        "postcss-viewport-units": {},"cssnano": {
            preset: "advanced".autoprefixer: false."postcss-zindex": false}}}Copy the code

If you follow the desert teacher a fierce operation, you will find that the following problems may occur when installing dependencies:

4.1 postcss-cssnextThe plugin is deprecated. Recommendedpostcss-preset-env

Question:

Solution:

$ npm un -D postcss-cssnext
$ npm i -D postcss-preset-env
Copy the code

// your-project/.postcssrc.js

module.exports = {
  "plugins": {
    // ...
    - "postcss-cssnext": + {}"postcss-preset-env": {},
    // ...}}Copy the code

4.2 If you usevue cli3There will be a lack of partial dependencies

Question:

Solution:

$ npm i -D postcss-import postcss-url
Copy the code

4.3 cssnanothepresetUsing theadvanced, you need to install corresponding dependencies

Question:

Solution:

$ npm i -D cssnano-preset-advanced
Copy the code

5. In actual developmentvwAdaptive applications

5.1 incssIn the style of writing

In the actual code process, do not need to do any calculation, directly in the code according to the UI draft write PX, such as

.test {
    border:.5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}
Copy the code

Compiled CSS:

.test {
    border:.5px solid # 000;
    border-bottom-width: 1.667 vw;
    font-size: 3.733 vw;
    line-height: 5.333 vw;
    position: relative;
}
Copy the code

5.2 injsandtemplateWe define a utility class that converts numbers to VW

// your project/src/shared/utils.js
const toVw = (num) => {
  return ((window.Number(num).toFixed(5) / 375) * 100).toFixed(5) + 'vw'
}
const UTILS = { toVw }
export default UTILS

// your project/src/components/test.vue
<template>
  <div
    :style="{
        width: toVw(size),
        height: toVw(size)
      }"
  >
  </div>
</template>


<script type="text/ecmascript-6">
import UTILS from 'shared/utils'

export default {
  props: {
    size: {
      default: 15
    }
  },
  methods: {
    toVw (num) {
      return UTILS.toVw(num)
    }
  }
}
</script>
Copy the code

Six.vwSuitable pit and climbing position

6.1 pay attention toviewportThe change of the

If you use vH units in styles, note that in some WebViews the actual height of 100vh will decrease when the keyboard pops up

6.2 html2canvas

If you need to take screenshots on the front end and you’re using html2Canvas and you’re running on a lower version of ios, use version 0.5.0-Beta4 and leave the csS-Content tag blank

.target-el {
  content: "";
}

Copy the code

6.3 If you already haveremAdaptive components, and there arevw. Configure components based on requirementswebpacktheloadertheexcludeandinclude

happy hacking~!