REM

Typographie

by Stephane de Luca

HTML

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="molette">
  Définissez la taille du texte :
  <div class="range">
    <input type="range" value="62.5">
    <input type="text" value="62.5">
    <a class="default" href="">Remettre à 62.5%</a>
  </div>
</div>
<div class="example">
  <div class="pixel">
    <h1>Je suis défini en pixel</h1>
    <h2>Et par conséquent</h2>
    <p>Je suis incapable de m'adapter à la vue des gens, ou alors de rétrécir proportionnellement pour certains types de péréphériques</p>
  </div>

  <div class="rem">
    <h1>Je suis défini en REM</h1>
    <h2>Et par conséquent</h2>
    <p>Je suis capable de m'adapter à la vue des gens, ou alors de rétrécir proportionnellement pour certains types de péréphériques</p>
  </div>
</div>

CSS

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

body {
  border: 1px solid #ddddff;
}

.molette,
.pixel,
.rem {
  margin: 8px;
  padding: 8px;
  background-color: #ddddff;
}

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

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

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

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

.molette,
.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");
});