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

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

WBOY

リリース： 2016-06-24 11:30:34

オリジナル

1499 人が閲覧しました

ショーアンドショー

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

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

ログイン後にコピー

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

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

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