Maison > interface Web > js tutoriel > 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
Libérer: 2016-05-16 15:26:55
original
2049 Les gens l'ont consulté

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();
  }); 
Copier après la connexion

insolent :

$baseFontSize:16px !default;
// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}
html {
 font-size: $baseFontSize;
 -ms-touch-action: none;
}
Copier après la connexion
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal