REM

Typographie

by Stephane de Luca

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="wheel">
  taille du texte :
  <div class="range">
    <input type="range" value="62.5">
    <input type="text" value="62.5">
    <a class="default" href="">RÀZ</a>
  </div>
</div>
<div class="example">
  <div class="pixel">
    <h1>Unit pixels</h1>
    <h2>Résultat :</h2>
    <p>Je suis incapable de m’adapter à la vue des gens ni de m’adapter proportionnellement sur plusieurs types décrans</p>
  </div>

  <div class="rem">
    <h1>Unité REM</h1>
    <h2>Résultat :</h2>
    <p>Capable de m’adapter à la vue des gens et à tous types d’écrans</p>
    <p>Remarquez aussi que les fontes n'existent pas à chaque valeur de taille que l'on aimerait, ce qui produit de petites sautes de taille pour le texte.</p>
    <p>Les marges ont été laissées en pixels donc elles ne sont pas proportionnelles.</p>
  </div>
</div>

CSS

html {
  font-family: sans-serif;
  font-size: 60%;
}

body {
  padding: 1cm;
  background-color: #D4003E;
}

.wheel,
.pixel,
.rem {
  margin: 10px;
  padding: 30px;
  color: white;
  border: solid 1px white;
}

.pixel h1 {
  font-size: 20px;
}

.rem h1 {
  font-size: 2.0rem;
}

.pixel h2 {
  font-size: 15px;
}

.rem h2 {
  font-size: 1.5rem;
}

.wheel,
.pixel p {
  font-size: 10px;
}

.rem p {
  font-size: 1.0rem;
}

.range {
  display: inline-block;
  padding: 2px 8px;
  background-color: #fff;
  border-radius: 8px;
  vertical-align: middle;
}

.range [type=range] {
  vertical-align: middle;
}

.range [type=text] {
  width: 24px;
  margin-left: 8px;
}

.default {
  display: none;
  vertical-align: middle;
}

.default.visible {
  display: inline-block;
}

JavaScript

var range = $("[type=range]"),
  input = $("[type=text]"),
  vdefault = $(".default");

function changeValue(value) {
  vdefault.removeClass("visible");
  if (value != 62.5) {
    vdefault.addClass("visible");
  }
  input.val(value);
  range.val(value);
  $("html").css("font-size", value + "%");
}

range.change(function() {
  changeValue(range.val());
}).on("input", function() {
  changeValue(range.val());
});

input.keydown(function() {
  changeValue(input.val());
});

vdefault.click(function(event) {
  event.preventDefault();
  changeValue("62.5");
});