css - デスクトップ、タブレット、モバイル ビューのレスポンシブ ビルドで EM ユニットを使用するが、特定の要素でのみ使用する

Question

私は現在レスポンシブ サイトを構築しており、デスクトップからタブレット、モバイルに移行する際のサイズ変更タスクをよりスムーズにするために、フォント サイズ、行の高さ、パディングなどに EM 単位を使用しています。そのため、現在、私の本文のフォントはデスクトップ用に設定されていますが、タブレットではこれをドロップし、モバイルでは再び100%ドロップすると考えました。%私の問題は、モバイルのすべてのサイズを変更したくない場合はどうすればよい100% to 80%ですか? 多分私はこれが本文のコンテンツと見出しだけに起こりたいのですが、いくつかのもののサイズを変更するための最良の方法は何ですか? たとえば、モバイル ブレークポイント内のメイン ヘッダーのフォント サイズを % に変更しようとしましたが、これは正しくないようです。ビューごとにフォントのサイズを変更する際の最善のアプローチをよりよく理解したいだけです。

Answer 1

使用されているタグをターゲットにするだけです。

デスクトップ

h1 { font-size:100%; }

モバイル

h1 { font-size:80%; }

css の各部分をメディア クエリでラップするだけです。

より具体的にしたい場合は、サイズを変更したい特定のクラスがある場合は、見出しの p タグにクラスを追加してみてください。

デスクトップ

h1, h1.alt { width:100%; } 

モバイル

h1.alt { width: 70%; } 

上記は、クラス alt が適用された H1 のみを変更します。