メディア クエリを使用して div コンテンツ (ブラウザーのコンテンツ全体ではなく) をスケーリングする方法があるかどうか疑問に思っています。ウィンドウのサイズが特定のポイントを超えると、一部のコンテンツが他のコンテンツの背後に埋もれてしまう流動的な幅のサイトがあり、それを拡大縮小できるようにしたいと考えています。
問題が 2 つあります。1 つは、フォントに ems を使用しているのに、ブラウザのサイズが変更されてもフォントが拡大縮小されないことです。彼らはそうするはずですか？
次に、サイズを変更したい div のコンテンツの一部が画像であるため、一部のブラウザーではサポートされない css スケール プロパティを使用する以外に、それらをスケーリングする方法がわかりません。
誰でもこれを処理する最も簡単な方法をお勧めできますか? サイトで何が起こっているかのスクリーンショットを添付しました。
これの一部は昨日触れられたと思います：
画面に合わせてフォントのサイズを変更するには、ビューポート サイズのフォントが必要だと思います。
vw vh and vmin.
http://css-tricks.com/viewport-sized-typography/
画像のサイズを変更するには、各画面サイズに応じてサイズを指定するだけです。画面サイズに応じて特定のフォント サイズを設定することも、CSS プロパティを設定することもできます。
/* mobile phones */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* This is where you would specify the width and hight of your images */
}
/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
ここにもっとあります: Twitter Bootstrap でレスポンシブな背景?