Maison  >  Article  >  interface Web  >  Application de la mise en page rem en JavaScript dans les compétences react_javascript

Application de la mise en page rem en JavaScript dans les compétences react_javascript

WBOY
WBOYoriginal
2016-05-16 15:26:551985parcourir

J'ai partagé un projet React avec vous plus tôt (http://www.jb51.net/article/76085.htm Cette fois, j'ai apporté quelques améliorations au projet, en ajoutant la mise en page rem et). Optimisation d'iscroll sur Android.

Code du projet, bienvenue sur fork and star, aperçu en ligne

Exemple de code de mise en page REM

var fontSizeInit = function() {
  var doc = document.documentElement,
   cli = doc.clientWidth;
  cli&&(cli/=320,2<cli&&(cli=2),doc.style.fontSize=16*cli+"px");
 }
fontSizeInit();
  window.addEventListener('resize', function() {
   fontSizeInit();
  }); 

insolent :

$baseFontSize:16px !default;
// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
html {
 font-size: $baseFontSize;
 -ms-touch-action: none;
}
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn