1, with 1920* 1080 Take the design draft for example , realization PC End to end resolution adaptation

2, Installation dependency

 npm install --save lib-flexible      perhaps   yarn add lib-flexible -save

npm  install   px2rem-loader -D  perhaps   yarn add px2rem-loader

npm It can be used when it cannot be installed cnpm 

3, stay utils New under file One js file   as  viewport.js The code is as follows
(function() { var cssText = '' + '@charset
"utf-8";html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-overflow-scrolling:touch}html
*{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:transparent}body,html{font-family:"Microsoft
YaHei",sans-serif,Tahoma,Arial}article,aside,blockquote,body,button,code,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,pre,section,td,textarea,th,ul{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}input,input[type=button],input[type=reset],input[type=submit]{resize:none;border:none;-webkit-appearance:none;border-radius:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:after,q:before{content:\'\'}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}a,ins{text-decoration:none}a:active,a:hover,a:link,a:visited{background:0
0;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;outline:0;text-decoration:none}';
// cssText end var styleEl = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(styleEl); if
(styleEl.styleSheet) { if (!styleEl.styleSheet.disabled) {
styleEl.styleSheet.cssText = cssText; } } else { try { styleEl.innerHTML =
cssText; } catch (e) { styleEl.innerText = cssText; } } })(); ; (function(win,
lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl =
doc.querySelector('meta[name="viewport"]'); var flexibleEl =
doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; var
tid; var flexible = lib.flexible || (lib.flexible = {}); if (metaEl) {
console.warn(' Will be based on existing meta Label to set the scale '); var match =
metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) {
scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } } else if
(flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr =
content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr =
parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); } if
(maximumDpr) { dpr = parseFloat(maximumDpr[1]); scale = parseFloat((1 /
dpr).toFixed(2)); } } } if (!dpr && !scale) { var isAndroid =
win.navigator.appVersion.match(/android/gi); var isIPhone =
win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio =
win.devicePixelRatio; if (isIPhone) { // iOS lower , about 2 and 3 My screen , use 2 Multiple solutions , The rest is for use 1 Multiple scheme if
(devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if
(devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } }
else { // Other equipment , Still in use 1 Multiple solutions dpr = 1; } scale = 1 / dpr; }
docEl.setAttribute('data-dpr', dpr); if (!metaEl) { metaEl =
doc.createElement('meta'); metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' +
scale + ', minimum-scale=' + scale + ', user-scalable=no'); if
(docEl.firstElementChild) { docEl.firstElementChild.appendChild(metaEl); } else
{ var wrap = doc.createElement('div'); wrap.appendChild(metaEl);
doc.write(wrap.innerHTML); } } function refreshRem() { var width =
docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = width *
dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem =
win.rem = rem; } win.addEventListener('resize', function() { clearTimeout(tid);
tid = setTimeout(refreshRem, 300); }, false); win.addEventListener('pageshow',
function(e) { if (e.persisted) { clearTimeout(tid); tid =
setTimeout(refreshRem, 300); } }, false); if (doc.readyState === 'complete') {
doc.body.style.fontSize = 12 * dpr + 'px'; } else {
doc.addEventListener('DOMContentLoaded', function(e) { doc.body.style.fontSize
= 12 * dpr + 'px'; }, false); } refreshRem(); flexible.dpr = win.dpr = dpr;
flexible.refreshRem = refreshRem; flexible.rem2px = function(d) { var val =
parseFloat(d) * this.rem; if (typeof d === 'string' && d.match(/rem$/)) { val
+= 'px'; } return val; } flexible.px2rem = function(d) { var val =
parseFloat(d) / this.rem; if (typeof d === 'string' && d.match(/px$/)) { val +=
'rem'; } return val; } })(window, window['lib'] || (window['lib'] = {}));
4, stay main.js introduce  viewport.js 

5, modify build Configuration files in utils.js , Add the following code

const px2remLoader = {

  loader: "px2rem-loader",

  options: {

    // This parameter is passed through the psd Design draft    width  / 10  To calculate , Here, the 1920 Is the standard

    remUnit: 192

  }

};

6, modify   generateLoaders In the method  loaders as follows :

const loaders = options.usePostCSS

      ? [cssLoader, postcssLoader, px2remLoader]

      : [cssLoader, px2remLoader];

7, After completing the above six steps, you can follow the design 1:1 Developed , The unit is still in use px, for example :

reminder :

1,css It can't be written in the line , In line style cannot be converted to rem 

2, Background picture    background-size by  auto Not adaptive  

3, After modification, you need to restart the project  

 

 

 

Technology
©2019-2020 Toolsou All rights reserved,
Hikvision - Embedded software written test questions C Language application 0 The length of array in memory and structure is 0 In depth analysis data structure --- The preorder of binary tree , Middle order , Subsequent traversal How to do it ipad Transfer of medium and super large files to computer elementui Shuttle box el-transfer Display list content text too long 2019 The 10th Blue Bridge Cup C/C++ A Summary after the National Games ( Beijing Tourism summary )unity Shooting games , Implementation of first person camera python of numpy Module detailed explanation and application case Study notes 【STM32】 Digital steering gear Horizontal and vertical linkage pan tilt Vue Used in Element Open for the first time el-dialog Solution for not getting element