HTML と CSS を組み合わせてモバイル Web ページ用のアダプティブ コードを実装する

この記事の内容は、モバイル Web ページへの適応を実現するための HTML と CSS を組み合わせたコードに関するものです。必要な方は参考にしていただければ幸いです。

まず、私は最近、主に適応問題に関するモバイル Web ページを作成するプロジェクトに取り組んでいます。ブートストラップやその他のフロントエンド フレームワークをうまく使用せず、時間を無駄にしたくない場合は、適応できないのが面倒です。ここで私の方法を紹介します。

多くの人の方法も組み合わせています。アイデア。

1. 次のコード行を先頭に追加します:

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

この文は、ズームを自動的に設定するためのものですが、すべての携帯電話に完全に適応しているわけではなく、ブラウザのモバイル モードを使用する場合は正常である可能性があります。デバッグしますが、実際の携帯電話に切り替えるのは実際には異常です。したがって、私たちはまだ変化を加える必要があります。

2. magin、padding、font-size、その他の属性を使用する場合は、px の代わりに rem を使用することをお勧めします。ここでは、直接インポートできる js コードを提供しています。レムとは何ですか? 原理については、別のブログで使用方法を説明します。 Webページを書く際にHTMLに入れることができる以下のjsコードです。以下のコードの 640 は携帯電話の画面幅を指します。一般的に、市場で販売されている携帯電話画面の最大幅は 640px であるため、ここでは画面の最大幅を指すために i=640 が使用されます。最小値は 320px で、次の JS を引用することで、独自の Web ページを作成できます。この JS の 1rem=100px は、実際には font_size:14px; と書くことができます。

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

3. それでは、カルーセル効果を見てみましょう

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">





    


    
  

    

 
     

        
 
       

        

        

        

        

      
    

    

    
  

   

関連する推奨事項:

CSS 属性を使用してフォントとシャドウの効果を実装する方法(コードのデモ)

マウスが div ブロックに移動したときに CSS が自動的にシャドウ効果を追加するにはどうすればよいですか?

HTML と CSS3 で 2D と 3D を組み合わせてアニメーション効果を実現します

以上がHTML と CSS を組み合わせてモバイル Web ページ用のアダプティブ コードを実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。