移動端レイアウト方法

主に3種類の移動端レイアウト方法を紹介します.

応答レイアウト,@meidaを用いて各sizeを判断する.

REM

viewportのwidth

を設定する

一、応答式レイアウト

この感覚が一番よく理解できました,@mediaを利用してブレークポイントを行い,各ブレークポイントにcssを記述します.@media (max-width:768px){//css }

上記のコードは、ブラウザの幅が768未満の場合に有効です.同様にmaxをminに置き換えると768より高い値に有効になります.幅を設定したり、高さを設定したり、複数の値を同時に設定したりできます.MDN,@mediaでは,多くの値が判断できることが分かった.幅、高さ、幅比、色(これは出力装置の各画素単位を指定するビット値)、横スクリーンまたは縦スクリーンかどうか、まだたくさんあるので、MDNに行ってみてください.@meidaはまた、メディアタイプに応じてブレークポイントを行うこともできる.

メディアタイプによるブレークポイントをいくつか見ます:

@media (max-width:1000px){
    div{background:blue;}
}
@media (min-width:1000px) and (max-width:1150px){
    div{background: yellow;}
}
@media only screen and (max-width:1150px){
    div{border:solid 1px;}
}
@media not print and (max-width:1150px){
    div{border-radius:50%;}
}

それぞれ、ブラウザ幅が1000 px未満の場合、ブラウザ幅が1000 px以上1150 px未満の場合、画面に1150 px未満の表示と幅が1150 px未満の場合、印刷に1150 px未満の表示を除き、幅が1150 px未満の場合

@mediaはlinkラベルにも使用できます.

ブラウザ幅が500 px未満の場合、1.cssのスタイルが効果的です.しかし、これは500 pxより大きい場合ではなく、1をロードしていないことを意味する.css.@mediaプロパティを使用すると、条件が一致した場合にのみ、対応するcssファイルが効果的になります.そして、cssに@mediaを書かなくてもいいというメリットがあります.
二、REM
REMという単位は、htmlのfont-sizeサイズに応じて変換されます.

html{font-size:100px;}
p{padding-top:.5rem;}

変換後のpのpadding-topは50 pxです.適切な計算をすれば、現在の画面の幅、htmlのfont-sizeがどれだけpxであればOKです.

現在のhtmlのfont-size値をどのように計算するか例えば、私たちが手に入れた設計原稿は750 pxで、スクリーン幅が750のときhtmlのfont-sizeが100 pxに設定されています(もちろん、この100 pxは勝手に設定できますが、私は100 pxに設定して計算しやすいだけです).そして、現在のスクリーンの幅/750*100に基づいて、現在のスクリーン幅のfont-size値が得られます.

(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 / 750) + 'px';
          };

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

淘宝モバイル端末REMは、flexibleを導入した.js.dprに基づいて計算し、全体のスケールを行います.

三、viewportのwidthを設定する

つまりviewportのwidthサイズを固定します.例えば、設計原稿は750で、コードに書きます.

私はiphone 7、小米5 s、グーグルブラウザでシミュレートしたiphone 6 plusで、フォントの色が黄色です.だから@mediaメディアクエリーは使用できません.幅が決まっているからです.REMスキームはメディアクエリを使用することができます.モバイル端末には奇妙なサイズが多く、ブラウザや微信によって高さが異なるため、間隔に大きな問題がある可能性があります.

比較のまとめ:

応答式のメリットとデメリット

の利点:互換性がよく、@mediaはie 9以上でサポートされており、PCとMOBILEは同じコードで、区別する必要はありません.

欠点:cssを他の2つに比べて多く書く必要があります.そして、各ブレークポイントはよくしなければなりません.cssスタイルは少し大きくて、もっと面倒です.

REMメリットとデメリット

の利点:全体的なレイアウト効果を維持でき、モバイル側の互換性がよく、複数のcssコードを書く必要がなく、@mediaを利用して最適化することもできます.

欠点:最初にjsコードを導入するには、単位をrem(font-sizeはpxで使用可能)に変更し、remを計算するのは面倒です(プリプロセッサを参照できますが、コンパイルプロセスが増加し、相対的に面倒です).PCとmobileは別々にします.

viewportのwidthの設定

の利点:REMと同じで、remを書かずにpxを直接使うと、より速くなります.

欠点:効果はremの良いことがないかもしれませんが、画像は相対的にぼやけている可能性があります.また、@mediaを使ってブレークポイントを行うことができません.sizeの携帯電話によっては、高さの間隔が大きく異なる可能性があります.

やはりプロジェクトの需要を見て、どの案を使うか決めて、もし携帯電話の駅なら、私はREMを使うことが多いです.距離が正確であれば、css 3アニメーションを大量に使用する場合は、3つ目を使用します.
参考個人が使用したモバイル端末のレイアウト方法のまとめ