响应式布局

响应式布局

开发工具与关键技术：Visual Studio 


撰写时间：6月9号  

作者：  曾子千  

一、页面布局

 响应式布局：它的意思是你布局好的局面，无论在手机、电脑等等显示器中显示，它都会自动适应大小，保存页面的完整性！

二、layui的响应式布局

我通常用的布局是由layui插件里的响应式布局，它简化 HTML和CSS 代码，让页面适配能力增强

layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统。

它将div容器进行了 12 等分，预设了 4*12 种
CSS 排列类，使它们在不同的显示屏屏幕下发挥着各自的作用！

三、layui的响应式布局规则

1. 采用 layui-row 来定义行，如：

2. (1).采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内。其中：变量md 代表的是不同屏幕下的标记。

(2).如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行

注意：列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），呈现动态灵活的布局！

3.在列（column）元素中放入你自己的任意元素填充内容，完成布局

四、layui响应式布局使用

引用css样式

@插件layui@

引用JS样式

@插件layui@

div样式

    常规布局（以中型屏幕桌面为例）：

    <div class="layui-row" style="background:#00ffff;">

        <div class="layui-col-md9">

            你的内容 9/12

        </div>

        <div class="layui-col-md3" style="background:#ff0000;">

            你的内容 3/12

        </div>

    </div>

效果图：