Plan 1: REM

Step 1: Create rem.js and import it to the page

(function (doc, win) { var docEl = doc.documentElement var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' var reCalc = function () { var clientWidth = docEl.clientWidth if (! clientWidth) return docEl.style.fontSize = 16 * (clientWidth / 320) + 'px' } if (! doc.addEventListener) return win.addEventListener(resizeEvt, reCalc, false) doc.addEventListener('DOMContentLoaded', reCalc, false) })(document, window)Copy the code

Step 2: Create base. SCSS file and define rem to PX function

$browser-default-font-size:16px! default; //iphone6 html,body{ font-size:$browser-default-font-size; } @function px2rem($px){ @return $px/$browser-default-font-size*1rem; }Copy the code

Step 3: All sizes in the code are converted with px2rem(), for example:

div{
	width:px2rem(100px);
    height:px2rem(100px);
    fonst-size:px2rem(20px);
}
Copy the code

Plan 2: VW plan, borrowed plug-in

Step 1: Install the plug-in

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

Step 2: Add configurations

After completion of the new automatically creates postcss. Config. Js file, if no can create, and package. Json files in the same directory Add the following configurations can be: the module exports = {plugins: {autoprefixer: Postcss-px-to-viewport ':{unitToConvert: 'px',// unitToConvert: 'px',// unit viewportWidth: PropList: ['*'],// Specify the unit of CSS properties to convert, * represents the unit of all CSS properties to convert. ViewportUnit: 'vw',// Specify the window unit to be converted to, default vw fontViewportUnit: 'vw',// Specify the window unit to be converted to, default VW selectorBlackList: [],// specify the class name not to be converted to window units, minPixelValue: 1,// default value 1, not to be converted if less than or equal to 1px mediaQuery: true,// whether to convert in CSS code for mediaQuery, default false replace: // Omit: undefined,// set to omit: undefined,// set to include: undefined, landscape: False,// Whether the landscapeUnit: 'vw', landscapeWidth: 568}}}Copy the code

Supplementary notes:

Try to use EM height or do not convert height, can avoid the problem of height dislocation.