レスポンシブ開発には JavaScript を使用する

この記事では主に、レスポンシブ開発のための JavaScript での rem の使用方法を紹介し、参考にさせていただきます。

昨夜、モールのコンピューター版が完成し、今日はモバイル版の作成を急いでいます。モバイルサイトに関して最初に思い浮かぶのは、さまざまな携帯電話の画面の幅に適応することです。さまざまな携帯電話のユーザーに正常に表示されるようにするためです。 以前は、この種の Web サイトを構築するときに、何も考えずにブートストラップが導入されました。しかし、前のプロジェクトを完了した後、ブートストラップは優れているものの、その中のさまざまなスタイルをほとんど使用しないことがわかりました。最終的に Web サイトをアップロードすると、圧縮後も容量が必要になることがわかります。大きな部分なので、今回はネイティブ書き込みとレスポンシブ開発を使用したいと思います (今でも少しは理解しています)。 パーセンテージの方法:

名前が示すとおり、ページの要素のマージンとパディング、幅、高さなどはすべて % を使用して計算されます。CSS の百分率は何を指すのでしょうか。すべてのパーセンテージは次のようになります。 。子要素の幅が 50% の場合、親要素の幅は 100、子要素の padding-left は 50%、親要素の幅は 100、子の margin-top は 100 です。要素が 20% の場合、親要素の高さは 100 になります。したがって、本文のデフォルトの幅は画面の幅（PC のブラウザの幅を指します）になります。これは、単純なレイアウトのページにのみ適しています。複雑なページを実装します。

2. メディアクエリ:

これはcss3で与えられます。このメディアクエリは、この問題を解決するために生まれました。さまざまなメディア さまざまな CSS スタイルを設定します。ここでの「メディア」には、ページ サイズ、デバイスの画面サイズなどが含まれます。最も一般的に使用される形式は

phone: @media screen and (max-width: 767px) {/style in mobilephone/ }

パッド: @メディア画面と(最大幅: 991px)と(最小幅: 768) {/タブレット スタイル/}

pc: @メディア画面と(最小幅: 992ピクセル){/コンピューター スタイル/ }

...(さらに多くのノードを設定することもできます)

メディア クエリを使用する場合は、各ピクセルに対応する適応効果があることを確認する必要があります。明らかに、幅の範囲を小さく設定する必要があります。

3. rem の単位:

rem は、ルート ノード html の font-size 値をページ全体の基本サイズとして使用します。たとえば、

3 つの P も 1 行に表示されます。この小さなデモを取得すると、ここに小さな穴があることに注意してください。 Google Chrome で確認すると、最初はブラウザ ウィンドウが縮小するにつれて 3 つの p も縮小し、特定の値に達すると移動が停止することがわかります。これは、Google Chrome がデフォルトで最小の HTML フォント サイズをサポートしているためです。値は 10px; この値より小さい場合は、それ以上小さくなりません。これは、私が当時インターネットで 2 時間近くかけて検索し、何も考えずに何度も試した問題です。最後に、そのような非人間的な理由を見つけました。

以上があなたのために役立つことを願っています。

関連記事:

vue-metaを使用してヘッダータグを管理する方法

Nuxt.jsでよくある問題(詳細なチュートリアル)

React Native関連のクロスドメインリソースエラーの問題

nodejs 最新バージョンの npm をインストールする (詳細なチュートリアル)

js で関数 debounce を実装する方法 (詳細なチュートリアル)

vue-scroller でスクロール位置をマークして記録する方法

以上がレスポンシブ開発には JavaScript を使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。