Lauiui が自己適応を実現する方法

layuiフレームワークのレスポンシブレイアウト機能を利用することで、アダプティブレイアウトを実現できます。手順には以下が含まれます:layui フレームワークを参照する。アダプティブ レイアウト コンテナを定義し、layui-container クラスを設定します。レスポンシブ ブレークポイント (xs/sm/md/lg) を使用して、特定のブレークポイントの下にある要素を非表示にします。グリッド システム (layui-col-) を使用して要素の幅を指定します。オフセット (layui-offset-) によって間隔を作成します。応答性の高いユーティリティ (layui-invisible/show/block/inline) を使用して、要素の可視性とその表示方法を制御します。

layui を使用して適応性を実現する方法

layui は、リッチ UI を提供する軽量で最新のフロントエンド フレームワークです。コンポーネントと強力な応答機能。 layui を使用してアダプティブ レイアウトを実装するには、次の手順に従います。

1.layui フレームワークを参照します

次のコードをコピーして、HTML ページに貼り付けます。 ：

<code class="html"><script src="path/to/layui.js"></script></code>

2. アダプティブ レイアウトのコンテナを定義します

アダプティブ コンテンツを配置するコンテナを作成し、##layui-container クラス:

<code class="html"><div class="layui-container">
  <!-- 自适应内容 -->
</div></code>

3. レスポンシブ ブレークポイントの処理

layui にはいくつかのレスポンシブ ブレークポイントが用意されており、必要に応じてそれらを使用してさまざまな画面サイズに調整できます。以下のレイアウトです。これらのブレークポイントには次のものが含まれます。

• xs: 画面の幅が 768px
• sm 未満です: 画面の幅が 992px# 未満です
##md
• : 画面幅が 1200px
lg
• 未満: 画面幅が 1920px
未満

layui-hide-xs

、layui-hide-sm、layui-hide-md、layui-hide-lg を使用できます。特定のブレークポイントの下にある要素を非表示にするクラス。たとえば、次のコードは、画面幅が 768 ピクセル未満の場合に要素を非表示にします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;layui-hide-xs&quot;&gt; &lt;!-- 此元素将在屏幕宽度小于 768px 时隐藏 --&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

4. グリッド システムの使用

layui は、便利なグリッド システムを提供します。レスポンシブなレイアウトを作成します。グリッド システムは 12 列を使用し、

layui-col-

と列数を追加することで要素の幅を指定できます。たとえば、次のコードは 6 列を占める要素を作成します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;layui-col-6&quot;&gt; &lt;!-- 占据 6 列的元素 --&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

5. オフセットの使用

オフセットを使用して、要素の周囲にスペースを作成できます。

layui-offset-

とオフセット値を追加することで、要素のオフセットを指定できます。たとえば、次のコードは要素の左側に 3 列のオフセットを追加します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;html&quot;&gt;&lt;div class=&quot;layui-col-6 layui-offset-3&quot;&gt; &lt;!-- 占据 6 列且向左偏移 3 列的元素 --&gt; &lt;/div&gt;&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

6. レスポンシブ ユーティリティを使用する

layui ではいくつかの応答スタイルが提供されます。レスポンシブなレイアウトを簡単に作成するのに役立つユーティリティ。これらのユーティリティには次のものが含まれます。

layui-invisible
• : 要素を非表示にします。
layui-show
• : 非表示の要素を表示します。
layui-block
• : 要素をブロックレベルの要素として表示します。
layui-inline
• : 要素をインライン要素として表示します。
これらのユーティリティを使用すると、さまざまな画面サイズでの要素の表示と表示を簡単に制御できます。

以上がLauiui が自己適応を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。