江苏龙网

  1. 首页 > 资讯 > 科技 > >

『』手把手教你做规范：布局规范( 三 )


『』手把手教你做规范：布局规范
本文插图

在2560的屏幕下看页面 ， 槽的宽度保持不变 ， 栏的宽度发生改变 。 如下图：
『』手把手教你做规范：布局规范
本文插图

在1024的屏幕下看页面 ， 槽的宽度保持不变 ， 栏的宽度发生改变 。 如下图：
『』手把手教你做规范：布局规范
本文插图

问题来了 ， 这样一算栏的像素就不但不是偶数 ， 而且还不是整数了 ， 怎么办 ， 屏幕该怎么显示呢？没关系 ， 有的卡片可能是351个像素 ， 有的是356个像素 ， 这样1像素的差距在屏幕上很难看出差别来 ， 为了在不同大小的屏幕上适配 ， 这1像素是可以忍受的 。
需要把子元素内的布局样式 ， 那些是可以变动的地方跟前端说明即可 。 （例如：当连变化时 ， 卡片内的图标保持左对齐 ， 左边距不变 。 文字左对齐 ， 每行的文字数量自适应 。 ）
优点：在不同屏幕下会自动放大或缩小 ， 更充分的利用空间 。
缺点：由于栏宽是不固定的 ， 样式可能会发生变形 。 文字可能会变成多行或者超长的一行 。
（3）混合栅格
在同一页面中可以分成多个区域 ， 每个区域做不同栅格类型 。
『』手把手教你做规范：布局规范
本文插图

四、从0建立后台栅格系统
1. 确定栅格的基准
根据自家的业务场景定下最小单位和栅格数量 ， 我们以8为最小原子单位距离 ， 之后所有的数值是8的倍数 ， 栅格数量采用12举例 。
2. 确定栅格区域
后台系统和网页不同 ， 往往逻辑复杂、数据量大 ， 同时需要获取、比对很多的信息 。
信息以表格、表单居多 ， 所以屏幕的宽度就显得很重要了 ， 寸土寸金 。 所以通常选中全部填充的样式 ， 舍弃两侧留白的样式 。
我们选择设备比例最多1920×1080为画板 。 （这里主要将纵向栅格 ， 暂不考虑浏览器自身的标签栏和菜单栏的高度）
制定如下的样式 ， 数值仅供参考 ， 照搬的请慎重 。
『』手把手教你做规范：布局规范
本文插图

3. 放置内容
在栏内放置内容 ， 内容不能在开始和结尾不能在槽里 ， 内容的高度也需要保持8的倍数 。
『』手把手教你做规范：布局规范
本文插图

4. 响应策略
（1）大/小屏幕响应
当屏幕变大时 ， 左侧蓝色菜单栏保持宽度不变（固定栅格） 。 右侧栅格区域的槽保持不变 ， 栏等比例扩大 。 （流动栅格）
当屏幕变小时 ， 左侧蓝色菜单栏保持宽度不变（固定栅格） 。 右侧栅格区域的槽保持不变 ， 栏等比例缩小 。 （流动栅格）
『』手把手教你做规范：布局规范
本文插图

（2）平板响应
当屏幕小到平板的尺寸时候 ， 栅格区的内容就无法正常显示了 ， 十分影响体验 。 于是就是改变栅格的数量 ， 变成6列栅格 ， 同时菜单栏收缩简要模式 ， 这样就完成了平板端的适配 。
『』手把手教你做规范：布局规范
本文插图

（3）手机响应
当屏幕是iPhone8、8P…等手机尺寸时候 ， 栅格区就改为更少的栅格 ， 同时菜单栏变为汉堡按钮 。 还可以把一些内容做隐藏处理 ， 例如常见的咨询客服、相关推荐等 。
『』手把手教你做规范：布局规范


推荐阅读


上一篇：「iPhone」关于iPhone订阅一连串问题，苹果官方长图解疑

下一篇：「伊隆·马斯克」让马斯克“低头”的国货之光：不是世界第一，我们没有存在的价值