您现在的位置: 首页 > 网站导航收录 > 百科知识百科知识
columns是什么意思啊(columns是什么意思中文)
栅格,宽度,屏幕columns是什么意思啊(columns是什么意思中文)
发布时间:2016-12-08加入收藏来源:互联网点击:
信息以表格、表单居多,所以屏幕的宽度就显得很重要了,寸土寸金。所以通常选中全部填充的样式,舍弃两侧留白的样式。
我们选择设备比例最多1920×1080为画板。(这里主要将纵向栅格,暂不考虑浏览器自身的标签栏和菜单栏的高度)
制定如下的样式,数值仅供参考,照搬的请慎重。
3. 放置内容在栏内放置内容,内容不能在开始和结尾不能在槽里,内容的高度也需要保持8的倍数。
4. 响应策略(1)大/小屏幕响应
当屏幕变大时,左侧蓝色菜单栏保持宽度不变(固定栅格)。右侧栅格区域的槽保持不变,栏等比例扩大。(流动栅格)
当屏幕变小时,左侧蓝色菜单栏保持宽度不变(固定栅格)。右侧栅格区域的槽保持不变,栏等比例缩小。(流动栅格)
(2)平板响应
当屏幕小到平板的尺寸时候,栅格区的内容就无法正常显示了,十分影响体验。于是就是改变栅格的数量,变成6列栅格,同时菜单栏收缩简要模式,这样就完成了平板端的适配。
(3)手机响应
当屏幕是iPhone8、8P…等手机尺寸时候,栅格区就改为更少的栅格,同时菜单栏变为汉堡按钮。还可以把一些内容做隐藏处理,例如常见的咨询客服、相关推荐等。
5. 小结栅格就是网格适配时通常槽的宽度不变、栏的宽度自适应栅格区域是内容区不是屏幕区域栅格响应类型:固定栅格、流动栅格、混合栅格#相关阅读#手把手教你做设计规范(1):颜色篇
手把手教你做设计规范(2):图标篇
手把手教你做设计规范(3):设计原则篇
手把手教你做设计规范(4):文案篇
作者:Iron设计邦;微信公众号 IRON设计邦
本文由 @Iron设计邦 原创发布于人人都是产品经理,未经作者许可,禁止转载。
题图来自Unsplash,基于CC0协议。
本文到此结束,希望对大家有所帮助呢。
下一篇:返回列表
相关链接 |
||
网友回复(共有 0 条回复) |