モバイルレイアウト用の動的REMの実装

 <スタイル>
        div{
            幅:980ピクセル;
            マージン:0 自動;
            背景:#f0f0f0;
        }
        ul{
            リストスタイル:なし;
        }
        li{
            フロート:左;
            左マージン:10px;    
        }
        クリアフィックス::後{
            コンテンツ："";
            表示:ブロック;
            クリア:両方;
        }
    </スタイル>
</head>
<本文>
    <div>
        <ul>
            <li>オプション 1</li>
            <li>オプション 2</li>
            <li>オプション 3</li>
            <li>オプション 4</li>
            <li>オプション 5</li>
            <li>オプション 6</li>
        </ul>
    </div>
</本文> 

//パーセンテージレイアウト <style>
        。子供{
            背景色:#ccc;
            テキスト配置:中央;
            幅:40%;
            マージン:10px 5%;
            フロート:左;
        }
        .clearfix::after{
            コンテンツ："";
            表示:ブロック;
            クリア:両方;
        }
    </スタイル>
</head>
<本文>
    <div class="親クリアフィックス">
        <div class="child">オプション 1</div>
        <div class="child">オプション 2</div>
        <div class="child">オプション 3</div>
        <div class="child">オプション 4</div>
    </div>
</本文> 

<スクリプト>
	pageWidth = window.innerWidth とします。
    document.write('<style>html{font-size:'+ pageWidth/10 +'px}</style>')
</スクリプト>

<スタイル>
。子供{
            背景色:#ccc;
            テキスト配置:中央;
            幅:4rem;
            高さ:2rem;
            マージン:10px 0.05rem;
            フロート:左;
            行の高さ:2rem;
        }
        .clearfix::after{
            コンテンツ："";
            表示:ブロック;
            クリア:両方;

        }
</スタイル>
</head>
<本文>
    <div class="親クリアフィックス">
        <div class="child">オプション 1</div>
        <div class="child">オプション 2</div>
        <div class="child">オプション 3</div>
        <div class="child">オプション 4</div>
    </div>
</本文>

@function pxToRem($px){
    @return $px/$designWidth*10+rem; //10は画面全体を10remに分割します
}
$designWidth:320; //デザイン幅.child{
    背景色:#ccc;
    テキスト配置:中央;
    幅:pxToRem(128);//4rem;
    高さ:pxToRem(64);//2rem;
    マージン: 10px pxToRem(1.6);
    フロート:左;
    行の高さ:pxToRem(64);
}
.clearfix::after{
    コンテンツ："";
    表示:ブロック;
    クリア:両方;

}