4つのモバイル端末適応方法

1.@media 画面は Web ページのレイアウトの適応性を実現します

利点: プラグインが不要で、さまざまな Web ページ レイアウトに適応できます。ウィンドウ サイズの場合は、CSS に @media screen 属性を追加するだけです。

公式ドキュメント: @media は、画面サイズごとに異なるスタイルを設定できます。特にレスポンシブなページを設定する必要がある場合、@media は非常に便利です。

構文: @media mediatype and|not|only (media feature) { CSS-Code; }

/* 屏幕宽度大于 1200px 则 h5 的字体颜色是black */
h5{
    color: black;
  }
@media screen and (max-width: 1200px){
  h5{
    color: #eee;
  }
}
/* h5字体颜色为红色，屏幕宽度只有在869px 与900px之间生效 */
@media screen and (min-width: 869px) and (max-width: 900px){
  h5{
    color: red;
  }
}
/* 屏幕宽度小于 320px 则 h5 的字体大小是20px */
@media only screen and (max-width: 320px){
  h5{
    font-size: 20px;
  }
}

次に、モバイル端末対応に問い合わせを開始しました。

2.rem 適応

このメソッドは、CSDN ブロガー「sxs1995」による元の記事、blog.csdn.net/sxs1995/art…

計算単位は640px = 6.40rem,

デザイン案の幅が750pxの場合、i = 750; デザイン案の幅が640pxの場合、i = 640。

欠点: 初めてページが読み込まれると、ラインが 1 ～ 2 秒間点滅し、携帯電話でプレビューするユーザー エクスペリエンスが良くありません。

!function(n){
  var  e=n.document,
  t=e.documentElement,
  i=720,
  d=i/100,
  o="orientationchange"in n?"orientationchange":"resize",
  a=function(){
    var n=t.clientWidth||320;n>720&&(n=720);
    t.style.fontSize=n/d+"px"
 };
  e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

3. @media を使用して rem 適応を実装する

利点: 画面幅が変更された場合、Html 要素のフォント サイズを変更するだけで済みます。 adapt

/* 不同屏幕宽度，设置不同的font-size */
@media screen and (width:750px){html{font-size:100px}}
@media screen and (width:749px){html{font-size:99.87px}}
@media screen and (width:748px){html{font-size:99.73px}}
...
@media screen and (width:321px){html{font-size:42.8px}}
@media screen and (width:320px){html{font-size:42.67px}}

4.vw を使用して rem アダプティブ レイアウトをカスタマイズする

Nuggets での CSS 開発スキルの柔軟な使用に関する著者 JowayYoung の記事を目にしました。 rem アダプティブ レイアウトをカスタマイズする vw

利点: モバイル端末で rem レイアウトを使用するには、JS を介してさまざまな画面アスペクト比のフォント サイズを設定する必要があります。vw ユニットと calc() を組み合わせることで、JS の制御から抜け出すことができます

/* 基于UI width=750px DPR=2的页面 */
html {
  font-size: calc(100vw / 7.5);
}

現在、私は上記の方法をすべて使用していますが、コード量を考慮して、主に vw を使用して rem アダプティブ レイアウトをカスタマイズしています。他にもっと良い提案はありますか?大切に参考にさせていただきます、ありがとうございました。

推奨チュートリアル: 「CSS チュートリアル 」

以上が4つのモバイル端末適応方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。