1. Instalar dependencias
NPM i lib-flexibles -S NPM i px2rem-loader -D
2. Crear una nueva carpeta en la carpeta src utilidades, los nuevos utils carpeta en la que flexible.js código es el siguiente
(function () {
// flexible.css
var cssText =
'' +
'@Charset "UTF-8"; html {color: # 000; fondo: #fff; overflow-y: scroll; -webkit-text-size-adjust: 100%; - MS-text-size-adjust: 100% ; -webkit-desbordamiento de desplazamiento: toque} {* html esquema: 0; -webkit-text-size-adjust: none; -webkit-tap-culminante-color: transparente} cuerpo, html {font-family: "Microsoft YaHei ", sans-serif, Tahoma, Arial} artículo, a un lado, blockquote, cuerpo, botón, código, dd, detalles, div, dl, dt, fieldset, figcaption, figura, pie de página, la forma, h1, h2, h3, h4, h5, h6, encabezamiento, hgroup, hr, de entrada, leyenda, li, menú, nav, ol, p, pre, sección, td, área de texto, TH, ul {margin: 0; padding: 0; -webkit-box-dimensionamiento : frontera-box; -moz-box-dimensionamiento: frontera de la caja, caja de dimensionamiento: frontera-box} artículo, a un lado, detalles, figcaption, figura, pie de página, encabezado, hgroup, menú, nav, la sección {display: block} de entrada, entrada [type = botón], introduzca [type = reajuste], introduzca [type = enviar] {redimensionamiento: none; border: none; -webkit-apariencia: none; border-radius: 0} de entrada,seleccionar, textarea {font-size: 100%} la tabla {border-collapse: colapso; espaciado de borde: 0} fieldset, img {border: 0} abbr, acrónimo {border: 0; font-variant: Normal} del {text -Decoración: tachado} dirección, título, citar, código, DFN, em, TH, var {font-style: normal; font-weight: 500} ol, ul {list-style: none} subtítulo, TH {texto -align: izquierda} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: 500} q: después, q: before {content: \ '\'} sub, sup {font -size: 75%; line-altura: 0; position: relative; vertical-align: baseline} sup {top: - 5em} sub {fondo: - 25em} a: hover {text-decoration: underline} a,.. ins {text-decoration: none} a: active, a: hover, a: link, a: visited {background: 0 0; -webkit-tap-culminante-color: transparente; -webkit-tap-culminante-color: transparente ; esquema: 0; text-decoration: none} ';Normal} del {text-decoration: tachado} dirección, título, citar, código, DFN, em, TH, var {font-style: normal; font-weight: 500} ol, ul {list-style: none} subtítulo, TH {text-align: left} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: 500} q: después, q: before {content: \ '\'} sub, sup {font-size: 75%; line-altura: 0; position: relative; vertical-align: baseline} sup {. superior: - 5em} sub {. abajo: - 25em} a: hover {text-decoration : underline} a, ins {text-decoration: none} a: active, a: hover, a: link, a: visited {background: 0 0; -webkit-tap-culminante-color: transparente; -webkit-tomas resaltar colores: transparente; esquema: 0; text-decoration: none} ';Normal} del {text-decoration: tachado} dirección, título, citar, código, DFN, em, TH, var {font-style: normal; font-weight: 500} ol, ul {list-style: none} subtítulo, TH {text-align: left} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: 500} q: después, q: before {content: \ '\'} sub, sup {font-size: 75%; line-altura: 0; position: relative; vertical-align: baseline} sup {. superior: - 5em} sub {. abajo: - 25em} a: hover {text-decoration : underline} a, ins {text-decoration: none} a: active, a: hover, a: link, a: visited {background: 0 0; -webkit-tap-culminante-color: transparente; -webkit-tomas resaltar colores: transparente; esquema: 0; text-decoration: none} ';line-height: 0; position: relative; vertical-align:.. la línea de base} sup {top: - 5em} sub {fondo: - 25em} a: hover {text-decoration: underline} a, ins {text-decoration: none} a: active, a: hover, a: link, a: visited {background: 0 0; -webkit-tap-culminante-color: transparente; -webkit-tap-culminante-color: transparente; esquema: 0; texto -Decoración: none} ';line-height: 0; position: relative; vertical-align:.. la línea de base} sup {top: - 5em} sub {fondo: - 25em} a: hover {text-decoration: underline} a, ins {text-decoration: none} a: active, a: hover, a: link, a: visited {background: 0 0; -webkit-tap-culminante-color: transparente; -webkit-tap-culminante-color: transparente; esquema: 0; texto -Decoración: none} ';
// cssText extremo
var styleEl = document.createElement ( 'estilo');
document.getElementsByTagName ( 'cabeza') [0] .appendChild (styleEl);
si (styleEl.styleSheet) {
si (styleEl.styleSheet.disabled!) {
styleEl.styleSheet.cssText = cssText;
}
} Else {
try {
styleEl.innerHTML = cssText;
} Catch (e) {
styleEl.innerText = cssText;
}
}
}) ();
;
(función (WIN, lib) {
var doc = win.document;
var DOCEL = doc.documentElement;
var metaEl = doc.querySelector ( 'meta [name = "ventana"]');
var flexibleEl = doc.querySelector ( 'meta [name = "flexible"]');
; DPR = 0 var
Escala var = 0;
TID var;
var flexibles = lib.flexible || (lib.flexible = {});
IF (METAEL) {
console.warn ( 'de acuerdo con el conjunto existente de escala etiquetas meta relación ');
partido var = metaEl.getAttribute /) (' partido Content ') (/ inicial \ -scale = ([\ D \.] +);.
IF (partido) {
[. 1] de escala = parseFloat (juego) ;
DPR = el parseInt (1 / Scale.);
}
} else IF (flexibleEl) {
var flexibleEl.getAttribute contenido = ( 'contenido');
IF (contenido) {
IF (initialDpr) {
DPR = parseFloat (initialDpr [1]).;
var initialDpr content.match = (/ inicial \ -dpR = ([\ D \.] +) /);
content.match maximumDpr = var (y / o máxima \ -dpR = (+) / [\ D \.]);
// al iOS, 2 y 3 para la pantalla, con 2 soluciones, el restante 1 por los tiempos de esquema
escala = parseFloat ((1 / DPR) .toFixed (2));
}
Si (maximumDpr) {
DPR = parseFloat (maximumDpr [1]);
escala = parseFloat ((1 / DPR) .toFixed (2));
}
}
}
Si (DPR && escala!) {
Var = isAndroid win.navigator.appVersion.match (/ android / GI);
var isIPhone = win.navigator.appVersion.match (/ iphone / gi);
var devicePixelRatio = win.devicePixelRatio;
si (isIPhone) {
si (devicePixelRatio> = 3 && (DPR DPR ||> = 3)) {
DPR = 3;
} Else if (devicePixelRatio> = 2 && (! DPR DPR ||> = 2)) {
DPR = 2;
} {el otro
DPR = 1;
}
} else {
// otros dispositivos, aún usando 1x realización
DPR = 1;
}
Escala = 1 / DPR;.
}
docEl.setAttribute ( 'Data-DPR', DPR);
SI (METAEL!) {
METAEL = doc.createElement ( 'Meta');
metaEl.setAttribute ( 'nombre', 'la ventana') ;
metaEl.setAttribute ( 'contenido', 'inicial-scale =' + + Escala 'máximo-scale =' + + Escala 'mínimo-scale =' + + Escala 'User-Scalable = NO');
IF ( DOCEL.firstElementChild) {
docEl.firstElementChild.appendChild (metaEl);
win.addEventListener ( 'pageshow', function (e) {
} Else {
var = doc.createElement envoltura ( 'div');
wrap.appendChild (metaEl);
doc.write (wrap.innerHTML);
}
}
Función refreshRem () {
. Var width = docEl.getBoundingClientRect () anchura;
si (anchura / DPR> 540) {
width = width * DPR;
}
Rem var = anchura / 10;
docEl.style.fontSize = rem + 'px';
flexible.rem = win.rem = rem;
}
Win.addEventListener ( 'cambio de tamaño', function () {
clearTimeout (tid);
tid = setTimeout (refreshRem, 300);
}, false);
si (e.persisted) {
clearTimeout (tid);
tid = setTimeout (refreshRem, 300);
}
}, False);
si (doc.readyState === 'completo') {
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;
si (typeof d === 'cadena' && d.match (/ REM $ /)) {
val + = 'px';
}
Val regresar;
}
Flexible.px2rem = function (d) {
var val = parseFloat (d) / this.rem;
si (typeof d === 'cadena' && d.match (/ px $ /)) {
val + = 'REM';
}
Val regresar;
}
}) (Ventana, ventana [ 'lib'] || (ventana [ 'lib'] = {}));
3. flexible.js introducidas en los main.js
importación'./utils/flexible.js
4. Modificar en los utils.js construcción
const px2remLoader = {
cargador: 'px2rem-loader',
Opciones: {
remUnit: 192
}
}
const = cargadores options.usePostCSS? [CssLoader, postcssLoader, px2remLoader]: [cssLoader, px2remLoader]
5. Proyecto de inicio
referencia: