レスポンスフォントサイズ(移動先)

6007 ワード


1、initial-scale 1;
2、 css ( base、common , ), html fontSize 100px( ), ;

html{fontSize:100px}

CSS

html{height:100%;position:relative;} body{margin:0 auto;height:100%;}

 
方法1
(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
        };

    // Abort if browser does not support addEventListener
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

方法2
new function (){
            var _self =  this ;
            _self.width = 640; //         
            _self.fontSize = 100; //       
            _self.widthProportion =  function (){ var p = (document.body&&document.body.clientWidth||document.getElementsByTagName("html")[0].offsetWidth)/_self.width;return p>1?1:p<0.5?0.5:p;};
            _self.changePage =  function (){
            document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+_self.widthProportion()*_self.fontSize+"px !important");
            }
            _self.changePage();
            window.addEventListener('resize', function (){_self.changePage();}, false );
        };

方法3
!(function(win, doc){
    function setFontSize() {
        //   window   
        // zepto   $(window).width()      
        var winWidth =  window.innerWidth;
 
        doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px' ;
    }
 
    var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
    
    var timer = null;
 
    win.addEventListener(evt, function () {
        clearTimeout(timer);
 
        timer = setTimeout(setFontSize, 300);
    }, false);
    
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) {
            clearTimeout(timer);
 
            timer = setTimeout(setFontSize, 300);
        }
    }, false);
 
    //    
    setFontSize();
 
}(window, document))

 
メソッド4(メディアクエリー)
換算remツール(https://offroadcode.com/prototypes/rem-calculator/)
@charset "UTF-8";
/* 320px   */
html {
  font-size: 100px; }

body {
  font-size: 0.14rem; }

/* iphone 6 */
@media (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
  html {
    font-size: 117.1875px; } }

/* iphone6 plus */
@media (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
  html {
    font-size: 129.375px; } }

p {
  border: 1px solid #eee;
  padding: 0.1rem; }

.f12 {
  font-size: 0.12rem; }

.f14 {
  font-size: 0.14rem; }

.f16 {
  font-size: 0.16rem; }

.f24 {
  font-size: 0.24rem; }

.f30 {
  font-size: 0.30rem; }

.f36 {
  font-size: 0.36rem; }