(五个响应式布局的切换效果，双击放大)

设计器采用一套完整成熟的响应式开发，支持五个布局，适应不同设备的屏幕尺寸；

一、五个布局分别为：

1、宽度小于576px分辨率的设备，代号：xs[默认屏]，如：手机、掌上电脑等手持设备；

2、宽度小于768px分辨率的设备，代号：xl[移动横屏]，如：横版手机、小型平板等设备；

3、宽度小于992px分辨率的设备，代号：sm[小屏]，如：平板电脑、老式小屏幕电脑；

4、宽度小于1200px分辨率的设备，代号：md[普屏]，如：台式电脑、笔记本电脑等设置；

5、宽度大于1200px分辨率的设备，代号：lg[大屏]，如：高分辨率电脑显示器，高清智能电视；

每一个布局都可以单独设置样式，展示不同的效果；

样式生效采用向上兼容方式处理，何为向上兼容？

如：设置xs默认屏某个样式则其他所有屏幕样式一起生效；单独设置xl移动横屏某个样式则一起生效小屏、普屏、大屏，但默认屏无效；单独设置大屏某个样式，则只生效大屏样式，其他所有屏无效；这就是向上兼容；

（每个样式的基本操作，点击播放视频）

二、布局样式的切换：

1、未锁定样式，自动样式切换（默认）；

     默认自动切换，每切换一个布局，点击指定模块修改可自动切换该屏样式；

（每个布局切换，样式切换方式）

      未锁定图标：

2、锁定样式；

     可通过右击布局切换图标锁定和点击样式锁定标志两种方法锁定样式；

（右击“”指定图标锁定样式）

（点击样式管理器右上角锁图标后，锁定样式）

     已锁定图标：

三、布局样式操作方法：

1、所有新操作，样式设置都是以默认屏样式开始设置，所以需要先锁定默认布局样式；

2、先设置元素基础的样式：宽度、高度；