Shulou(Shulou.com)05/31 Report--

This article mainly introduces "vue adaptive layout postcss-px2rem instance analysis". In daily operation, I believe many people have doubts about vue adaptive layout postcss-px2rem instance analysis. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "vue adaptive layout postcss-px2rem instance analysis". Next, please follow the editor to study!

First, let's take a look at lib-flexible and amfe-flexible:

Lib-flexible is an open source plug-in developed by the Taobao project team, which automatically adds a meta name= "viewport" tag to html's head and automatically sets html's font-size to the screen width divided by 10, that is, 1rem equals the font-size of the root node of html. Amfe-flexible is an upgraded version of lib-flexible, so now I only use amfe-flexible.

The function of the matching postcss-px2rem (pxtorem) is to transform px into rem.

1. Download amfe-flexible: cnpm install postcss-px2rem-S

two。 Download postcss-px2rem: cnpm install postcss-px2rem-S

Little tip: you can't download it with yarn.

It's a bit of a hassle to be compatible. I specified the version here.

3. Introducing amfe-felxible into main.js

Import 'amfe-flexible'

3. Configure postcss in the vue.config.js file

The vue-cli3 I downloaded is configured as follows

Module.exports = {css: {loaderOptions: {css: {}, postcss: {plugins: [require ('postcss-px2rem') ({remUnit: 37.5})]}

The vue-cli2 configuration is

Module.exports = {"plugins": {"postcss-import": {}, "postcss-url": {}, / / to edit target browsers: use "browserslist" field in package.json "autoprefixer": {}, "postcss-pxtorem": {/ / here is the added part rootValue: 100, / / conversion cardinality. Specify the font-size of the root tag as 1rem as 50px, measure on the design draft how much px is written directly in the code, px unitPrecision: 5, / keep the number of rem decimal places propList: ['*','! border','! font-size'], / / store the list of attributes to be converted '! font-size' does not convert fonts to rem selectorBlackList: [' .radius'], / / Selectors that are ignored and reserved for px, such as fs-xl class names, where px styles will not be converted and regular writing is supported. Replace: true, mediaQuery: false,// (Boolean value) Media query (@ media screen, etc.) minPixelValue: 12 media screen / set the minimum pixel value to be replaced, px less than 12 will not be converted / / propWhiteList: [], / / default value is an empty array This means that the whitelist is disabled and all properties propBlackList: ['font-size'], / / blacklist} are enabled. At this point, the study on "vue adaptive layout postcss-px2rem instance analysis" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.