iPhone 6設計原稿に基づいて、rem値を動的に計算します.

1238 ワード

rem単位は、モバイル端末のh 5開発をする時に最もよく使う単位です.適応された問題を解決するためには、文書の更なるノードに対して動的にfont-size値を追加する必要がある.mediaqueryを使用してこの問題を解決することができますが、各ファイルは一列のfont-size値を参照するのが煩雑で、値も連続的な効果を達成することができません.
文書にjs動的計算を用いたfopnt-size動的割当値について問題を解決した.
使用する場合は、下のコードをページの上部(headラベル内)に置いてください.
/**
 * [ iPhone6      js       rem  ]
 * @param  {[type]} currClientWidth [        ]
 * @param  {[type]} fontValue [     fontvalue ]
 * @return {[type]}     [description]
 */

    var currClientWidth, fontValue,originWidth;
    //originWidth              (     Iphone 6       )
    originWidth=375;
    __resize();

    //   resize  
    window.addEventListener('resize', __resize, false);

    function __resize() {
        currClientWidth = document.documentElement.clientWidth;
        //                      
        if (currClientWidth > 640) currClientWidth = 640;
        if (currClientWidth < 320) currClientWidth = 320;
        //
        fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);
        document.documentElement.style.fontSize = fontValue + '%';
    }
    
転載先:https://www.cnblogs.com/yisuowushinian/p/5107853.html