4

コンテナ div があるとします。

.container {
  max-width: 95%;
  margin-right: auto;
  margin-left: auto;
}

これにより、ブラウザの画面幅に比例した、美しく完全に反応する左右の余白が作成されますよね？

非常に小さい画面と非常に大きい画面の場合は、いくつかの @media クエリを追加してバインドすることもできるため、コンテンツは常に読み取り可能です。

@media (min-width: 450px) {
  .container {
  max-width: 100% // Remove the padding
  }
}

@ media (min-width: 1170px) {
  .container { max-width: 1170px // Prevent your content scaling to infinity
  }
}

ここで、タイポグラフィとフォント サイズに同じ原則を適用したいと考えたとします。

画面幅に比例する最小値と最大値を含む相対的な % フォント サイズ。私は多くの飛び跳ねる静的な @media クエリについて話しているわけではありません ( BS3が依存しているように) が、上記のコンテナーのようにスムーズな移行について話しているのです。

そして、私はjavascriptなしでそれをやりたいです（ブー！lettering.jsはありません！）。そこにCSS3の達人はいますか？

はがきで答えてください。

4

4 に答える 4

2

私が知っている2つの解決策：

  1. 数百の画面幅に対して数百のメディア クエリを作成し、それぞれに適切なフォント サイズを適用します。通常のようにメディアクエリを使用しているだけの場合、コピーのサイズがスムーズに変化しているように見えます。たくさんあるというだけです。

  2. SVG テキストを使用します。スムーズにスケーリングし、SEO フレンドリーです。これは、SVGテキストのスムーズなスケーリングを示す簡単な例です（とりわけ）

http://jsfiddle.net/9tUAd/33/

<div class="svg-wrap">
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 550 350" xml:space="preserve" preserveAspectRatio="xMinYMin meet" height="100%" width="100%">
    <text x="0" y="50%" fill="#ffffff" stroke="none" width="100%">Simplified example</text>
</svg>

メディア クエリ以外に、テキストをスムーズにスケーリングするための純粋な CSS ソリューションはありません。

于 2014-03-20T19:36:21.067 に答える