2

すべてのデバイスで可能なすべての画面に合わせてページを拡大縮小したいのでem、ルート要素のサイズを変更するというアイデアを使用しました。すべての子要素のサイズはemです。

ページのサイズ変更とズームも適切にサポートされている必要があります。

私は現在、このような面白いCSSコードを200行持っています:

      .........
@media (max-width: 400px) {
     #vb { font-size: .8px}
}
@media (max-width: 350px) {
     #vb { font-size: .7px}
}
@media (max-width: 320px) {
     #vb { font-size: .64px}
}
       .........

このコードを自動的に生成するきれいなライブラリをお願いしたいと思います。

これらの 200 ～ 1000 行はキロバイトを消費するため、この巨大な CSS コードはフロントエンドで生成する必要があると確信しています。

PS：私のアプローチの正しさはどうですか？

解決策は次のとおりです。

  • JavaScript でページ サイズを計算し、次のような 2 行のコードを追加するとどうなるでしょうか。

    var fontSize = calculateFS(); $('#vb').style({sizeSize: fontSize});

このコードは、ウィンドウのサイズを変更したりズームイン/アウトしたりしない場合にうまく機能します。しかし、イベント onzoom または onresize をキャッチしようとすると、インターフェイスに深刻な遅延が発生します。

  • コミュニティを形成する他のアイデアはありますか？

清聴ありがとうございました

4

1 に答える 1

1

を使用したレスポンシブ タイポグラフィを検討してみませんremsか?

この記事では、これについて詳しく説明します。短い抜粋:

@media (max-width: 640px) { body {font-size:1.2rem;} }
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width: 960px) { body {font-size:1.2rem;} }
@media (min-width: 1100px){ body {font-size:1.5rem;} }

これは、親要素ではなく要素にrems相対的であるため、ems やピクセルを使用するよりもはるかに優れたオプションのように思えます。body

私はこれを誤解しているかもしれませんが、それほど多くのメディア クエリや JS をまったく使用する必要があるようには思えません。

メディア クエリを保守しやすくしたいだけなら、Compass と Sass の使用を検討してみてはいかがでしょうか。http://css-tricks.com/media-queries-sass-3-2-and-codekit/

于 2012-11-23T14:01:29.113 に答える