モバイル Web デザインには多くの利点がありますが、それは正しく使用された場合に限られます。適切な技術を使用すると、大きな画面、小さな画面、および小さな PDA 画面でページを適切に表示できるようになります。ただし、コード構造が不十分だと、流動的なレイアウトにとって悲惨な結果になります。したがって、ほとんどのフロー設計の欠点に対する実行可能な解決策を見つける必要があります。
デザイナーとして、機能的に流れるレイアウトを作成するためにさらに努力したのであれば、さらに一歩進んで、ほとんどの画面に限定されるのではなく、すべての解像度と互換性があるようにしてみてはいかがでしょうか。いくつかのテクニックを使用すると、画面解像度が変わっても機能が損なわれない、予想外に適応性のあるレイアウトを作成できます。
この記事では、100% 機能的なレスポンシブ CSS レイアウトを作成する実証済みの方法について説明し、他のチュートリアルと実践の詳細なリストを提供します。
以前の記事も参照できます。
1. グリッドを使用した流動的なレイアウト
私たちのほとんどは、固定幅の Web ページをデザインするための960 グリッド システムについて聞いたことがあるでしょう。960 グリッド システムを使用すると、流動的なレイアウトよりも固定幅のデザインが好まれます。ただし、グリッドベースのフレックス レイアウトを作成する方法があります。技術的に言えば、エラスティック レイアウトのコード構造は流体レイアウトのコード構造とは異なりますが、ユーザーにほぼ同じ効果を提供します。
フローレイアウトとは何ですか?
流動的なグリッドは、div、パーセント、および単純な数学的計算をインテリジェントに使用して作成されます。このアイデアは、「em」がフォント サイズを改善するものであると認識した Ethan Marcotte から来ています。ここではこの基本概念をもう一度取り上げますが、このアプローチの包括的かつ詳細な理解については、グリッドベースの柔軟なレイアウトの構築に関する包括的なチュートリアル「フローング グリッド」を参照してください。
このアイデアは、相対的なサイズを使用し、パーセンテージと em を組み合わせ、単純な分割を使用して、固定幅デザインで使用される対応するピクセル幅を見つけることです。
アドバンテージ：