1

Twitter Boostrap 3 と LESS を使用する中規模のプロジェクトで使用する OOCSS や SMACSS などの CSS のベスト プラクティスと方法論を研究しています。私はこれらの方法を理解し始めていますが、レスポンシブ デザインと CSS モジュールの関係を処理する方法を見つけるのに苦労しています。

たとえば、プロジェクトで使用されるすべての種類のボタン (色、形状、サイズ) を含むボタン モジュールがあるとします。デバイスに応じてボタンを変更するにはどうすればよいですか。同じボタンをモバイルでは大きく、デスクトップでは通常のボタンにする必要があります。OOCSS に従って、btn--default と btn--large のような 2 つのスキン クラスが必要です。しかし、HTML は各デバイスで同じであるため、HTML でこのクラスを切り替えることはできません。また、デバイスのサイズに応じてボタンのサイズを変更するモジュールの CSS でメディア クエリを使用することは、モジュールをこの特定のニーズに結合することになるため、お勧めできません (通常のボタンが必要な場合はどうすればよいでしょうか)。後で携帯？）

別の例として、さまざまなレイアウト (垂直/水平) が可能な製品セクション モジュールがあります。デスクトップでは垂直レイアウト、モバイルでは水平レイアウトを使用したい場合はどうすればよいでしょうか。私はまったく同じ問題に直面しています。2 つの異なるサブモジュール (product--horiz、product-vert) を簡単に作成できますが、それらを変更することはできません。

javascript を使用してクラスを切り替えることもできますが、それは適切ではなく、JS を無効にするとデザインが壊れてしまいます。あるデバイスから別のデバイスに要素が大きく変化している場合、設計が正しくない可能性があると言うことができますが、これを抑制することは実際の制限になります.

では、この問題についてどうお考えですか。それに直面するために使用される一般的な慣行はありますか？

4

2 に答える 2

0

ボタンの例を使用するには：

モバイルはタブレットでもあり、タブレットはデスクトップと同じ大きさのさまざまなビューポート サイズで提供されます。メディア クエリはタッチなどの機能を検出しないため、メディア クエリの作成は、そのビューポート サイズでの視覚化のみを目的としています。.touch .btn- {big styles} などの js を使用して機能検出を行う場合を除き、すべてのデバイスで大きなボタンと太い指用の大きなクリック領域を使用することをお勧めします。私は小さなスクリプトを使用して html に配置.no-touchし.touchますが、.touch のためだけに大きな領域を作成する必要はありません。可能な限り、すべてのためにそれらを作成します。

于 2014-10-31T19:01:19.847 に答える
0

基本ボタン スタイルは、「modules.scss」のボタン モジュールで定義する必要があります。すべてのボタンを超えるスタイルをここに適用します。次に、smacss 'states.scss' ファイル (最後にコンパイル) の違いを処理します。ボタンの外観を変更するメディア クエリと一意のクラスを処理する状態ファイルには、1 つの「ボタン」セクションが必要です。必要に応じてさらに詳しく説明できます。

于 2016-04-06T14:08:43.333 に答える