Update – the article I wrote two days ago did not expect to get this warm response. First of all, thank you for your support and love. I am also just into the mining soon, the original intention is to want to write some articles in this principled front-end community, the usual accumulation of more than summary. On the one hand, it helps to urge myself, and on the other hand, I hope I can help my friends in need. I hope the big guys can express their opinions or suggestions more, grow up together, progress! Pat, grateful (ಥ _ ಥ) a real watched with vw, wh adapter tutorial

From the old percentage layout + PX + media query to REM layout, I haven’t found a suitable solution for mobile. Online search tutorial quality is also uneven (either configuration is too tedious, or an article copied everywhere), anyway, I read the total have a helpless do not know how to start. Fortunately, a colleague recommended a perfect plug-in. Exultation, for record. At the same time, I hope I can provide help to friends in need.

Postcss-px-to-viewport

Here is not much to introduce VW, VH attributes, after all, a lot of Internet search, this article only the purest dry goods. Just install the PostCSS-px-to-viewport plug-in through the package management tool and configure it to use px units directly on the page. After compiling the project, it will automatically convert to the corresponding VW or VH properties

Px to VW, VH

1. Search Githubpostcss-px-to-viewport

Choose the one with the most stars

I am excited to see the Document in Chinese

2. Install the plug-in

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

3. Set parameters

The vue cli3.x version is used as a reference and configured in package.json

Above, now the code using px can be directly converted to the corresponding VW, VH attributes

Handle boundary cases through media queries

In general, converting PX to VW and VH can handle 99% of mobile applications, but there are occasional cases where you need to use media queries for smaller screen resolutions

Using the iphone6 as the base layout, for example, looks fine

But at 320 pixels, like the iphone5, there are some flaws

You can see that the fonts overlap. This is where the magic weapon comes in. Use media queries

This code means that when the user’s phone has a resolution (width) of 320 pixels to 340 pixels, it will be compatible. Here’s what it looks like

The perfect solution

Resolve component library conflicts

There was a style conflict when we introduced the PostCSS-px-to-Viewport plug-in and a third-party component library into the project. The px unit of the third-party component library is also changed to vH, which can seriously affect the look of the component library, which is something we don’t want to see.

Below is the popover component with the liked component library. You can see that the component’s PX has been changed to vH by mistake, making the popover look ugly and weird.

The surface is as steady as a tiger. Hurry on the official document to see if there is a solution (encounter problems first see the document! See the official document!)

My intuition is that “selectorBlackList” will solve the problem, so just write “van” in the attribute and see if you can filter matches

Save and return to the page to see the effect

Perfect solution!

note

The class names of component libraries generally have their own unique prefix, so we use this prefix name for filtering

conclusion

As for the compatibility of VW and VH attributes, according to the data provided by https://caniuse.com/ website, THE PC terminal may be a little unsatisfactory, but the mobile phone can be used at ease. (By the way, browser compatibility is a hindering technology.)