最終的に応答性の高い Web レイアウトを作成するために、静的な幅をパーセンテージに変換する方法を理解したいと思う単純な静的レイアウトをまとめました。レイアウトの幅、フォントサイズ、パディング、マージンをパーセンテージで計算する最も簡単な方法を推奨できる人はいますか? 私は静的な形式でレイアウトを作成することに慣れていますが、この % テクニックを実装する方法を完全に理解したいと思っています。
私の簡単なレイアウトへのリンクはここにあります: http://jsfiddle.net/9fH87/
すべてのアドバイスを歓迎します、カイルに感謝します
2 つの列の固定幅を 45% に置き換えると、流動的なレイアウトが得られます。これは、コンテナーに収まるレイアウトを意味します。簡単な検索
でたくさんの例を見つけることができます。
正直なところ、パーセンテージはビューポートの幅に常に対応しているため、悪い考えです。ビューポートのサイズを変更すると、すべての単語が押しつぶされます。
これを行う最善の方法は、コンテナー div (body-container という名前) を作成し、必要な幅を指定して、このコードを使用して中央に配置しmargin: 0 auto;、ボディの最小幅を許容できる値に設定することです。現在、ほとんどの人は少なくとも 1080 幅の解像度を持っているため、通常は 1080px が適切です。
これが私の例です：http://jsbin.com/ufesif/2