How to achieve a responsive layout with Layui? Layuiでレスポンシブなレイアウトを実現する方法は？

1年 ago
芽依, 雨夜
1 minute

Layuiのレスポンシブデザインは、Layuiのグリッドシステムとレスポンシブクラスを使用して実装することができます。以下に簡単なサンプルコードを示します：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui自适应布局示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">自适应布局</div>
            <div class="layui-col-xs12 layui-col-sm6 layui-col-md8">自适应布局</div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.js"></script>
    <script>
        // 初始化layui
        layui.use(['element'], function () {
            var element = layui.element;
        });
    </script>
</body>
</html>

上記の例では、自動適応レイアウトを実現するためにLayuiのグリッドシステムを使用しました。行と列を定義するためにlayui-rowとlayui-col-*クラスを使用し、異なる画面サイズに対応する列幅を設定するためにlayui-col-xs12、layui-col-sm6、layui-col-md4、そしてlayui-col-xs12、layui-col-sm6、layui-col-md8を使用しました。

上記の例で使用しているのはCDNから提供されたLayuiのライブラリやスタイルファイルです。もし既にプロジェクトにLayuiが導入されている場合は、必要に応じてインポートパスを変更してください。

bannerAds