ビューポートでウェブレイアウトを拡大する

Question

CSS 3のユニットvw,vhおよびvmがあります。これは、ブラウザのビューポートサイズに対してボックスサイズとテキストサイズを持つ要素を作成するのに便利なようです。しかし、残念ながら、これらは現在の主要なブラウザではうまくサポートされていません。 Internet Explorer 9以降でのみ動作します。

CSS font-sizeのプロパティをビューポートに合わせて使用​​する他の方法はありますか？可能であれば、JavaScriptおよび/またはjQueryソリューションを避けたいと思います。

Answer 1

100％スケーラブルなウェブサイトを作成することは可能です。 Revが言ったように、パーセンテージ値を使ってこれを行うことはできますが、それは難しいことです。

より良いオプションは、@media queriesを利用することです。これにより、特定の条件下でのページにのみCSSルールを適用できます。メディアのクエリを使用してデバイスの幅やページの幅を検出することで、サイトの見た目が異なるビューポートのサイズを微調整することができます。例：

@media screen and (max-device-width: 960px) { 
    font-size:14px; 
} 
@media screen and (max-device-width: 480px) { 
    font-size:13px; 
} 

ここで、上記の例は、ほんの些細なものです。メディアクエリで何が達成できるかをより深く理解するために、W3C spec pageを見ることをお勧めします。最も強力なものの一部は、width,min-device-width,max-device-width,、およびprintのクエリです。

これらのスタイルは、CSSの下部に含めて、デフォルトのスタイルで上書きされないようにしてください。