How to implement a responsive layout using layui?

2 years ago
Ava Mitchell
2 minutes

The responsive layout in Layui can be achieved by using Layui’s grid system and responsive classes. Below is a simple example code:

<!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>

In the example above, we utilized Layui’s grid system to achieve responsive layout. We defined rows and columns using the layui-row and layui-col-* classes, and set column widths for different screen sizes with layui-col-xs12, layui-col-sm6, layui-col-md4, and layui-col-xs12, layui-col-sm6, layui-col-md8.

It is important to note that the examples above have used the Layui library and style files provided by CDN. If you have already included Layui in your project, you can modify the import path according to your needs.

bannerAds