rem単位

1121 ワード

css:
 html {
  font-size : 20px;
}
@media only screen and (min-width: 401px){
  html {
      font-size: 25px !important;
  }
}
@media only screen and (min-width: 428px){
  html {
      font-size: 26.75px !important;
  }
}
@media only screen and (min-width: 481px){
  html {
      font-size: 30px !important; 
  }
}
@media only screen and (min-width: 569px){
  html {
      font-size: 35px !important; 
  }
}
@media only screen and (min-width: 641px){
  html {
      font-size: 40px !important; 
  }
} 

js:
!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width && (docEle.style.fontSize = 20 * (width / 320) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

メディアクエリーの具体的なfont-sizeは、デザイナーたちと一緒にデバッグして、自分の会社に合ったセットを書く必要があります.
参考資料1参考資料2