この記事の内容は、モバイル 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 サイトの他の関連記事を参照してください。