web-dev-qa-db-ja.com

レスポンシブWebサイトを作成するためのCSS構造

私は小さなチームで働くバックエンドエンジニアなので、時々フロントエンドを行う必要があります。何かを始める前に、優れたワークフローとプロジェクト構造を開発するのが好きなので、Webアプリのレスポンシブフロントエンドを作成することを考えています。

小さい画面に「縮小」する必要があるレスポンシブWebサイトを作成するためのCSSを構成するためのベストプラクティスの方法は何ですか？具体的には、まずモバイルバージョンを作成してから、CSSでmin-widthメディアクエリを使用してコードを拡張しますか？または、逆にデスクトップ解像度のバージョンを最初に作成しますか？

次に、同じメディアクエリで複数の要素セレクターと定義を定義しますか？または、各要素とセレクターに対してメディアクエリを定義しますか？ 2番目の方法では、おそらくコードが読みやすくなるように思われます。ただし、1つのメディアクエリで古い設定を単純にフェンスオフするのではなく、作業サイトを「微調整」してメディアクエリで新しいバージョンを作成する方が、確かにイライラします。新しいバージョンから必要なパーツのスタイルを最初から変更します。

web-developmenthtmlcssresponsive-design
2
b.b.

将来のWebアプリ開発のための構造を作成する場合は、モバイルファーストアプローチを使用してください。 2番目の質問については、次のように計算します（私の作業の抜粋）：

@media all and (max-width: 420px) {
    section, aside, .col1, .col2, .col3 {
        float: none;
        width: auto;
    }
}
@media all and (max-width: 978px) {
    header, footer {
        display: none;
    }
}

要件に従って、さらにスタイルを設定できます。

スタイルが複数の要素に共通している場合は、それらを組み合わせて処理のためのバイト数を減らし、それに従ってCSS固有ルールに従って要素固有のスタイルを生成します。

1
user3042648

最初にモバイルサイトを作成する方が、デスクトップサイトをモバイルビューポートに応答させるよりも簡単であることがわかりました。

メディアクエリに関しては、一般的な画面サイズのメディアクエリを使用します。また、レイアウトを微調整する必要があるサイズがある場合は、別のメディアクエリを追加します。したがって、同じメディアクエリに複数のセレクターを配置します。

しかし、最終的には、好みのスタイルを使用し、好みの画面サイズから始めるのはあなた次第です。どちらも間違っていません。

0
DFord

cssフレームワークを使用してそしてそれらから学ぶ

最初にモバイル版を作成します。

  • 重要な要素に優先順位を付けて、すばらしいUXを作成するように強制します

同じメディアクエリ内で複数のCSSルールを使用する

0
roo2