rem De acuerdo con el ancho del borrador de diseño, diseñe la relación de depuración rem

rem De acuerdo con el ancho del borrador de diseño, diseñe la relación de depuración rem

Uno, método de adaptación NetEase

Ancho de pantalla / borrador de diseño ancho remoto = valor de tamaño de fuente dinámico de la página

  (function(doc, win) {
    
    
    var docEl = doc.documentElement;
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    recalc = function() {
    
    
      var clientWidth = docEl.clientWidth > 750 ? 750 : docEl.clientWidth;
      if(!clientWidth) return;
      docEl.style.fontSize = clientWidth / 7.5 + 'px';
    };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
  

Explicación:

De esta manera, se establece el tamaño de fuente raíz de cada página, porque la unidad rem se basa en el tamaño de fuente raíz, por lo que siempre que se determine la conversión de un borrador de diseño correspondiente al teléfono móvil, los
tamaños de pantalla restantes se puede adaptar automáticamente.

Arriba encontramos que el valor de referencia del borrador de diseño convertido rem es 100, por lo que solo necesitamos dividir el valor de px en el borrador de diseño por 100 para obtener el valor de rem que queremos.
Px / 100 = rem, entonces 100px = 1rem, 25px = 0.25rem

En segundo lugar, el método de adaptación al lavado de manos.

El famoso Flexible

Importar: cite directamente el archivo CDN de Ali (o descárguelo a la importación local)

 <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>`在这里插入代码片`
 

Configuración: no configura la página. Flexible establecerá automáticamente el tamaño de fuente raíz de cada ancho de pantalla, ventana dinámica y dpr para pantallas Retina.

Conversión: asumiendo que el borrador del diseño es 750 igual que el NetEase anterior, Flexible dividirá el borrador del diseño en 10 copias, que se pueden entender como ancho de página = 10rem, es decir, 1rem = 75px, por lo que el tamaño de fuente raíz ( valor de referencia) = 75px. La siguiente fórmula de conversión css rem es:

px / 75 = rem, entonces 100px = 100/75 = 1.33rem, 50px = 50/75 = 0.66rem

Herramienta de conversión:

Obviamente, se puede ver que la conversión entre px y rem es algo complicada debido a la diferencia en el valor de referencia, e incluso requiere la ayuda de una calculadora. Recomiende un artefacto de conversión aquí: "cssrem"

　cssrem: 配值设置

　　　　px_to_rem - px转rem的单位比例，假设拿到设计稿750，基准值是75，此处就设75

　　　　max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。


　　　　available_file_types - 启用此插件的文件类型。[".css", ".less", ".sass", ".scss"]。
　　　　

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

Solución NetEase

1. Divida el borrador del diseño por 100 para obtener el valor de ancho rem.
2. Al establecer el tamaño de fuente para el estilo html, sustituya el valor de ancho rem obtenido en 1 en x document.documentElement.style.fontSize = document.documentElement.clientWidth / x + 'px';
3. El borrador de diseño px / 100 se puede convertir a rem
excelente: la adaptación se realiza a través del tamaño de fuente raíz dinámico, básicamente no hay problemas de compatibilidad, la adaptación es más precisa y la conversión es simple.
Deficiente: Sin zoom de la ventana gráfica y sin adaptación a la pantalla Retina del iPhone, lo que lleva a una adaptación inadecuada a algunos teléfonos móviles.

Programa Hand Tao

1. Divida el borrador del diseño por 10 para obtener el valor de referencia del tamaño de fuente.
2. Introduzca flexible
3. No establezca el valor de escala de la ventana gráfica de meta.
4. El valor de referencia del tamaño de fuente / px del borrador del diseño se puede convertir a rem
excelente: a través del tamaño de fuente dinámico raíz, viewpor, dpr se utilizan para la adaptación, sin problemas de compatibilidad, adaptación precisa.
Deficiente: Es necesario convertir el valor de referencia de acuerdo con el borrador del diseño. Cuando no se utiliza el complemento del editor de texto sublime para el desarrollo, el cálculo de la unidad es complicado.