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,可以根據需求修改引入路徑。