自响应规则（微站）-深量 ShenLiang（中国）｜网站建设｜网站设计

一．响应式启用规则

手机访问：默认开启

响应式：点击响应式按钮置蓝色为开启，启动响应式网页设计可同时适配pc端与移动端设计，移动端无需再次设计

关闭响应式：点击独立设计按钮置蓝色为开启，启动独立设计可单独设计移动端，同时同步按钮会出现可点击进行pc内容同步

二、设计规则

1.算法会自动判断控件是否处于同一行

2.当浏览器宽度小于设计器页面宽度时,会触发响应式自动布局，处于同一行的控件在屏幕宽度变化时,会自动缩放大小与间距

3.控件最小缩放比例为0.618(即黄金分割比例)。当该行的控件无法继续缩小,并且总宽度之和超过该行父级的宽度时,控件会向下自动换行

4.当页头的第一行控件高度低于160px 并且(是手机访问或者页面宽度小于640px 或者第一行控件换行了 )则生成一个导航条按钮替换原有的第一行控件(因为有时候设计师在顶部放的并不是导航条而是一排按钮或者有2个导航条夹着一个图片所以不能简单的直接替换原有导航,而是筛选第一行控件)

。如果第一行有图片,则取最大的一张图片为logo图置于左上方；

。如果第一行是导航则取导航的前景色和背景色，否则,取页头的背景色,若页头背景色未设置,或者不存在页头,则默认背景色为灰色

5.算法会优先识别控件为一行而非优先识别为一列,如果想纵向的控件识别为一行,可以将其放入同一个控件中即可（选定想处于同一行的控件,将其置入同一容器内CTRL+上箭头️）

6.多个控件之间请勿重叠,否则无法识别其是否同一行或者响应式算法出错展示效果不佳

7.如果多个控件与一个控件有交集,请将其各自置于一容器（CTRL+ ⬆进行控件归类为一个容器）

8.banner图加文字或其他控件算法按照图内第一个控件的边缘与轮播图顶部边缘的距离进行判断响应式的高度，如轮播图是一张图片则自动出发响应式等比例缩放

9.置入同一容器要遵循从小到大，从左到右的原则，否则会出错

10.多个版块并排时，最好不要多次置入同一个容器，否则会出错

11.首页大标题样式尽量上下排版，否则相应会出问题

12.使用标签尽量控制在4个之内,（也要看文字的多少来定）否则会显示不全

13.板块的宽度尽量两遍各留10px，这样移动端不会贴边展示

14.网站小icon尽量用图片控件展示，容器和按钮容易变形

三、交互说明

1.响应式对设计师的布局规范要求更加严格,肉眼无法识别的像素偏差 ,算法是可以计算出来的 ,就会导致看起来相似的两块区域,布局效果可能会不一样，所以在制作过程中如果想相似两块区域展示效果一样那么控件设置也必须一样

2.若启用了响应式功能,则可以使用快捷键（Shitf+Enter）触发该功能(保存页面时也将自动触发),若检测到控件重叠,未居中等,则给与用户提示并搞亮显示。

3.快捷键（Shitf+Enter）检测当前设计符合标准，如检测到当前设计符合响应式设计规范则会提示检测完美通过

检测到当前设计不符合响应式规范：右侧弹出检测结果并且鼠标移上去，可以搞亮显示控件

4.控件尽量不可重叠

5.居中但没有完全未居中

(在容器中心±15%的位置算作未居中,超过15%则可能本来就不想居中)

支持点击一键居中

6.溢出容器外

7.点击「保存」规范检测：

如果符合设计规范，则直接不提示也不弹框

如果不符合设计规范，则同4.1快捷键（Shitf+Enter）规范检测

8.快捷键（启用响应式有效）：

Ctrl+⬆️：：将多个控件置于同一容器内

Shitf+Enter：控件规范检测

自响应规则（微站）


速美/云企 H5/外贸品牌商城品牌小程序素材