携帯端末rem

網易

1.viewport

1.まず、設計原稿の縦方向の解像度を100で割ってbody要素の幅を得る.

       iphone6，      750，body width 750 / 100 = 7.5rem

2.レイアウトの場合、設計図の寸法を100で割ったcssの寸法例:プレーヤーの高さ210 px、スタイルを書くときcssはheight:2.1 remと書くべきである.100を参照として取るのは、ここでremを計算する便利さのためです!3.dom ready以降、htmlのfont-sizeを以下のコードで設定する

document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

var deviceWidth = document.documentElement.clientWidth;
if(deviceWidth > 640) deviceWidth = 640;
document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';

4.font-sizeは追加のメディアクエリーを必要とし、font-sizeはremを使用できません.例えば、網易の設定:

@media screen and (max-width:321px){
    .m-navlist{font-size:15px}
}

@media screen and (min-width:321px) and (max-width:400px){
    .m-navlist{font-size:16px}
}

@media screen and (min-width:400px){
    .m-navlist{font-size:18px}
}

宝を洗う

Device-widthの計算式は、デバイスの物理解像度/(devicePixelRatio*scale)であり、scaleが1の場合、device-width=デバイスの物理解像度/devicePixelRatioの各デバイスのdevicePixelRatioは既知であり、不変であり、現在は高スクリーンであり、一般的には2であるが、2.5,3など、devicePixelRatioが2の場合、scaleを0.5に設定すると、devicePixelRatioが3の場合、scaleを0.3333とする目的は、ページのサイズが設計原稿と一致することを保証することである.viewportのscaleを動的に設定する

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

2.htmlのfont-sizeを動的に計算する

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

3.レイアウトの場合、各要素のcssサイズ=設計原稿寸法/設計原稿横解像度/10
第一歩は、ビジュアルデザイン段階で、デザイナーが幅750 px(iPhone 6)でデザイン原稿を作成し、画像以外のすべてのデザイン要素をベクトルパスで作成します.設計下書き後750 pxの設計下書きに表示し、表示図を出力します.同時に1.5倍拡大して幅1125 pxの設計原稿を生成し、1125 pxの原稿にカットする.
第2のステップでは、2つの成果物を開発エンジニアに出力します.1つはプログラムで使用される@3 xカットリソースであり、もう1つは幅750 pxの設計寸法図です.
ステップ3では、開発エンジニアが750 pxの寸法図と@3 xの切図リソースを入手し、iPhone 6(375 pt)のインタフェースの開発を完了します.この段階では、インタフェースを固定幅で開発することはできません.自動レイアウト(auto layout)を使用して、後続が他のサイズに適しているようにしなければなりません.
ステップ4では、デバッグフェーズに合わせて、iPhone 6のインタフェース効果に基づいて、iPhone 6 plus(414 pt)とiPhone 5 S以下(320 pt)のインタフェース効果をそれぞれ上下にデバッグします.これにより、大中小3画面の適合が完了します.
http://www.cnblogs.com/well-nice/p/5509589.html