レスポンシブ Web デザインの小さなポイントについてチャットする_html/css_WEB-ITnose

ショーアンドショー

テクノロジーのおかげで私たちの生活はますます面白くなり、情報の伝達手段は手紙、新聞、書籍から電子メール、ソーシャルネットワーキングサイト、マルチメディアウェブページなどに広がりました。私たちは静止していることに慣れています。ラップトップで作業したり、情報を閲覧したり、メールを処理したりすることもありますが、外出中にこれらの作業を iPhone で行うこともあります。

そして、さまざまなデバイス上での情報、つまりテキストや画像要素の表示効果は、フロントエンドエンジニアにとって最も悩ましい問題の 1 つとなっています。それをさまざまなデバイスのディスプレイ上でどのようにうまく表示するかが、伝説的なレスポンシブです。

メディア クエリ

メディア クエリは、シンプルな構文と使いやすい関数を備えた非常に優れたものです。

@media <media-query-list> {  <group-rule-body>}

簡単に言えば、メディアクエリは CSS スタイルのオーバーライド関数です。 もちろん、情報表示用のデバイスがメディアクエリの条件を満たしている場合は、メディアクエリの中括弧内に定義を追加する CSS ルールが使用されます。以下のコードは次のことを意味します: 視覚的な幅が 768px 以下のすべてのデバイスで中括弧内のスタイルを使用します。つまり、

のフォント サイズは 24px になります。

@media all and (max-width: 768px) {  p {    font-size: 24px;  }}

media クエリは、all、print、screen、speech のメディア タイプをサポートしています。ただし、すべてのブラウザがこれらのメディア タイプを実装しているわけではありません。たとえば、現時点では Firefox は all と screen カテゴリのみをサポートしています。

メディアクエリでサポートされるクエリ条件 (メディア条件) には、幅、高さ、アスペクト比、色、方向などが含まれており、w3 Web サイトで確認できます

メディアの場合、多くの場合、これらの条件は必要ありません。 2つのcssファイルを書き込みます。

Unit

Unit は本当に頭の痛い問題です。px を使用するのが好きな人もいますし、em を好む人もいますし、% を使用する人もいます。この明らかな違いは、具体的には何でしょうか。 ?

• px

px は絶対的な単位ですが、ここでの絶対値は画面サイズに対する相対的なものであるため、同じ画面サイズに同じ px 値を設定すると、実際には表示サイズが異なります。 したがって、px が希望どおりに動作するようにメタを設定できます。

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,uer-scalabe=no"/>

• em

em は純粋に相対単位です。 font-size が em 単位に設定されている場合、親要素に対する相対的なサイズを表すため、要素の font-size が変更されると、それぞれが使用されます。 em の子要素のサイズはそれに応じて変更されます。

• rem

rem (root em) は、CSS3 の新しい相対単位です。em との違いは、em は親要素のサイズを基準とするのに対し、rem は親要素のサイズを基準とすることです。ルート要素。したがって、ルート要素のサイズが変更されると、 rem を使用するすべての要素がフォント サイズを比例して調整し、フォント サイズがレイヤーごとに複合される連鎖効果を回避します。

ただし、どのユニットを使用するかに有利も不利もありません。あなたとあなたのチームが適切だと思うものを選択し、それを使用するのがベストプラクティスだと思います。

ツール

フロントエンド開発のプロセスで最も面倒なことは、複数のデバイスをデバッグすることです。手元にある機器やツールがなければ、フロントエンドをデバッグするのは本当に大変です。そこで、ここでは 2 つの推奨ツールを紹介します。ハードウェア用とソフトウェア用です。

• browser-sync

これは、非常に使いやすく、非常に便利なマルチデバイス ツールです。レスポンシブ Web デザインには不可欠なツールです。 2 つのコマンドですぐに試すことができます:

rrree

詳細については、公式 Web サイトにアクセスしてください: browser-sync