阅读量:11
要实现响应式布局，可以使用Layui的栅格系统和响应式类来实现。以下是一个简单的示例代码实现响应式布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Layout with Layui</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/css/layui.css"> </head> <body> <div class="layui-container"> <div class="layui-row"> <div class="layui-col-md6 layui-col-lg4"> <div class="layui-card"> <div class="layui-card-header">Column 1</div> <div class="layui-card-body">Content goes here</div> </div> </div> <div class="layui-col-md6 layui-col-lg4"> <div class="layui-card"> <div class="layui-card-header">Column 2</div> <div class="layui-card-body">Content goes here</div> </div> </div> <div class="layui-col-md12 layui-col-lg4"> <div class="layui-card"> <div class="layui-card-header">Column 3</div> <div class="layui-card-body">Content goes here</div> </div> </div> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.js"></script> </body> </html> 在上面的示例中，我们使用了Layui的栅格系统来定义三个列，其中第一个列在小屏幕和中等屏幕上占据6个列的宽度，在大屏幕上占据4个列的宽度。第二个列在小屏幕和中等屏幕上占据6个列的宽度，在大屏幕上占据4个列的宽度。第三个列在小、中、大屏幕上都占据12个列的宽度。
这样就可以实现一个响应式布局，根据不同的屏幕大小来展示不同的布局效果。您可以根据需要对列的宽度和数量进行调整。
