携帯端末のページレイアウトのrem

 
  
 
   
 
    
相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局
 
   
 
   
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了
 
   
    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=640){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  
使用方法
これはremレイアウトのコアコードです.このコードの大意は、ページの幅が640 pxを超えた場合、ページのhtmlのfont-sizeは100 pxになります.そうしないと、ページのhtmlのfont-sizeのサイズは:100*(現在のページの幅/640)になります.そこで、問題が来ました.なぜですか.焦らないで、私が先に答えます.
なぜ640 pxですか?携帯電話の画面にとって、640 pxのページ幅は安全な最大幅であり、モバイル側のページの両側が白くならないことを保証しています.ここでpxはcss論理画素であり、デバイスの物理画素とは異なることに注意してください.iPhone 5がRetina網膜スクリーンを使用している場合、2 px x 2 pxのdevice pixelは1 px 1 pxのcss pixelを表すので、デバイス画素数は640 x 1136 pxであり、CSS論理画素数は320 x 568 pxである.端ページをカットする場合は、まず効果図の幅などのスケールを640 pxにスケールすることができ、使いやすいです.
  
 htmlのfont-sizeを設定するのはなぜですか?remはルート要素(html)のフォントサイズです.htmlの中のすべてのラベルのスタイルはすべてサイズに関わる(例えば:height、width、padding、margin、font-size.甚だしきに至っては、left、topなど)あなたは安心して大胆にremを単位にすることができます.htmlのfont-sizeを20 pxに設定すると、remはhtmlのフォントサイズで、1 rem=20 pxになります.この場合、幅60 px、高さ40 pxの要素スタイルはこのように設定されます↓
width: 3rem;
height: 2rem;
幅55 px、高さ37 pxですか?それから換算して、以下のように設定します↓
width: 2.75rem;
height: 1.85rem;
は換算するのが少し面倒だと気づいたのではないでしょうか、、(もちろん、あなたが心算帝なら無視してください)htmlのfont-sizeを最初に100 pxに設定したら?このとき1 rem=100 pxであれば、上の幅55 px、高さ37 pxの要素スタイルをこのように設定することができます↓
width: 0.55rem;
height: 0.37rem;
は換算すると簡単ではありませんか?!△もちろん、htmlのfont-sizeを最初に1 pxにしないのはなぜですか.このように換算しても簡単です.答え:ブラウザには一般的に最小フォントの制限があります.例えば、グーグルブラウザでは、最小中国語フォントは12 pxなので、実際には1 rem=1 pxにすることはできません.上記のjsコードによれば、ページ幅が640 px未満の場合、ページ中のhtmlのfont-sizeも(現在のページ幅/640)の割合で変化する.このように、ページにremを適用した寸法単位の要素は、ページの変化に伴って等比例してスケールされます.
  
 remレイアウトはどのような状況で使用できますか?ほとんどの場合remレイアウトという方法が使えますが、もちろん具体的には状況によって異なります.当社のプロジェクトを例に挙げると、下部のナビゲーションだけがremではなくflexレイアウトを使用しています.ナビゲーションクリックが最も多いため、固定されたサイズ(実は高さ固定、幅適応のスキーム)を与えます.宝を洗うこの携帯電話のページを見ることができます宝を洗う携帯電話のステーションは、基本的にこのような感じで、底のナビゲーションと上部の検索ボックス用の高固定、幅の適応案で、残りの部分は基本的にブラウザの幅の変化に伴って等比例してスケールされています.
  
最終ページコードトップページコードは大体次の通りです.


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

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
 
 /*      */
 


 /*    */

  
作者:minooo_ 
リンク:http://www.jianshu.com/p/b00cd3506782 
出典:簡書
著作権は作者の所有である.商業転載は著者に連絡して許可を得てください.非商業転載は出典を明記してください.