レスポンシブ レイアウトに関する洞察

レスポンシブレイアウトについては、人それぞれの意見があると思いますが、レスポンシブレイアウトはWebページの一種だと考えている人もいますが、私たちの本当のレスポンシブレイアウトはWebページのサイズに合わせて調整できるレイアウトです。 , PC側では、Webページ上のすべてが横に2列、または横に1列に分割されて表示され、PC側ではテーマのコンテンツが1行に表示されます。ですが、携帯電話では画面が縮小すると、本来縦に並んでいたボタンが横に並んでしまうことがあります。

レスポンシブレイアウトを書く方法はいくつかあります:

1. まず、メディアという言葉を皆さんは知っているはずですが、メディアとは英語でメディアを意味します。何ができるのでしょうか？実際、メディアには @media screen and(min-width:) (max-width) というステートメントがあり、このステートメントはレスポンシブ レイアウトの基本的なアプリケーションであり、異なる値を指定すると、異なる画面上に配置することができます。が表示され、レスポンシブ レイアウトの効果を実現できますが、ブラウザの互換性の問題により、まだ多くの問題が発生します。現時点では、メディアの他の属性が関係しています。つまり、メディアは依然として非常に強力であり、レスポンシブなレイアウトを実現するために使用することもできます。

2. 次に、レスポンシブ レイアウトを実装するもう 1 つの方法は、幅をパーセンテージの形式で指定することです。この種のレイアウトでは、画面が拡大または縮小されると、レイアウトも拡大されます。このようなレイアウト方法はレスポンシブなレイアウトを実現できますが、私の仕事や会社ではあまり推奨されていません。このレイアウト方法は、簡単な反面、開発が追いついていない問題も多くあります。このレイアウトはコード量が比較的多く見た目も悪いため、プロジェクトを進める際に大きな影響を与えるため、このレイアウト方法はシンプルではありますが、現在この種のレイアウト方法を使用している企業はほとんどありません。 。

3. 最後に、レスポンシブ レイアウトを行う別の方法として、ブートストラップのフェンスを使用する方法があります。それは、最大の画面でcol-lg-を使用し、タブレットのディスプレイでcol-sm-を使用し、最小の画面でcol -xs-を使用することです。 PC で表示したい場合は、col-md- を使用します。このフレームワークでは、コンテナーが 12 個のグリッドに分割されており、グリッドはさまざまなスタイルに適しています。たとえば、要素で 2 つのクラスが使用されている場合、デバイスの画面サイズに応じて適切なスタイルが選択され、画面サイズがクラスの範囲内にない場合は、これら 2 つのクラスは無視されます。クラス; フェンスの各スタイルは行に基づいており、クラスのさまざまな組み合わせを使用して、さまざまなデバイスに表示される目的の効果を実現できますが、このレイアウトは主にモバイル アプリ向けです。レスポンシブレイアウトですが、個人的にはこのレイアウトの枠組みはあまり良くないと思いますが、全体的には小さな問題はありません。

上記はレスポンシブレイアウトに関する私の個人的な意見です。もし間違っている点があれば、ご指摘ください。