私の記事「Elastic +固定幅レイアウト」の別の記事で、弾性と最小固定幅を備えたレイアウト計画を導入しました。これにより、別のレイアウト計画-Leastic Fluidレイアウトを紹介します。
そのソリューションは、実際にはこのレイアウトの柔軟なアプリケーションです。弾性レイアウトの最大の利点は、画面スペースを最大限に活用できることです。クライアントの解像度がどれほど大きくても、幅の変化に自動的に適応できます。
写真1
上の写真を見てください。これは外国のウェブサイトです。固定幅のレイアウトです。私たちのレイアウトはこの写真に基づいています。もちろん、この完全なページを作成する方法の包括的な紹介はありません。キーポイントにのみ説明します。
実際、弾性レイアウトを作成するのは比較的簡単ですが、このレイアウトは簡単ですが、詳細の把握はこのレイアウトの本質です。弾性レイアウトにはこのような優れた利点がありますが、比較的致命的な欠陥があります。
したがって、この記事はレイアウトに関する説明が比較的少ない可能性があり、上記の2つの問題を解決することに関するものです。上記の2つの問題が解決する限り、このレイアウトは比較的簡単になると思います。
一般に、弾性レイアウトはパーセンテージを使用して、コンテナの幅を設定します。これは、画面の幅に自動的に適応します。ただし、幅の値をユーザーが完全に自由にスケーリングすることはできません。このパーセンテージ幅の最小幅を制限する必要があります。ユーザーがウィンドウを特定の値に縮小すると、ウィンドウは再びスケーリングされません。
CSSに精通している友人は、このような4つの属性があることを知っています。
これらの4つの属性は、この問題を解決することができます。幸せですか？しかし、忙しくないでください。彼らはこの問題を解決することができますが、深刻な問題があります。ユーザーが最も使用しているブラウザIE6は、これらの属性をサポートしていません。これは非常に悪いことです。ブラウザを最もユーザーで破棄することはできません！
IE6がこれらの4つの属性をサポートする問題を解決するための4つの一般的な方法がインターネットにあります。
最初の3つには欠点があります。最適な方法を選択してください。私は最後のものが好きです。これは偉大な外国人によって達成されます。ここでは、関連する例をご覧ください：http：//www.doxdesk.com/software/js/minmax.html
このJSファイルを使用すると、このJSファイルをヘッダーに呼び出すだけです。
PS：デモンストレーションモデルの便利さのために、私はこれを内部参照と呼びます。実際のアプリケーションでは、このJSファイルをJSの外部ファイルに作成し、次のように呼び出します。
<script type = text/javascript src = minmax.js> </script>
スタイルシートの2つのコンテナ#wrapperと#footerにmin-widthを適用し、幅をそれぞれ100％に設定します。わかりました。これで、最小幅の問題を解決しました。