深圳网站制作公司易捷网络欢迎您,我司主营业务:深圳企业网站制作,欢迎来电。
深圳企业网站制作
深圳网站制作业务咨询
0755-61603557
赵先生:13714247375
深圳网站制作技术支持
您现在的位置:网站首页 > 深圳网站制作教程

设计稿响应式工作原理是怎样的呢

文章作者:易捷网站制作公司编辑    文章来源:深圳网站制作公司-易捷网络

当终端设备分辨率达到每一个zui小宽度(也称为临界值或断点),就会触发该宽度下预设的页面布局进行zui佳显示,这就是响应式的工作原理。

怎么查看一个响应式网站的断点?

用chrome浏览器打开一个响应式网站,右击“检查元素”,找到“布局”里的“盒模型”显示的就是视窗当前的分辨率,慢慢缩小视窗的宽度,页面布局会随着尺寸的变化而变化,这就是网站的断点。

响应式能够做到响应的前提有两点:

1.页面布局具有规律性;

2.元素宽高可用百分比代替固定数值;

而这两点正是栅格系统本身具有的典型特点,所以利用栅格系统进行响应式设计是顺理成章的,响应式与栅格化自然也成为了zui佳搭档。

注意:执行页面时,必须优先考虑版式设计与创意,而不是被规范所固化,当完成页面创意后,再进行栅格系统的规范化调整。

页面边距就是内容区域以外的空间,响应式页面边距可以随着屏幕尺寸增大而增大。

列和槽

列是内容的容器,槽是调节相邻两个列的间距,把控页面留白;列和槽加上页面边距就是屏幕的水平宽度。列和列间距的内容区域由N个列和(N-1)个槽组成。通常情况下,web 端采用 12 列,平板采用 8 列,移动端采用 4 列。

利用 Sketch 的布局设置功能,可快速搭建网格系统的参考布局,提高设计效率。(设置方法:菜单栏——视图——画布——布局设置)

以12栅格系统为例,一个12栅格系统根据业务需要,可被2等分、3等分、4等分、6等分、12等分,还可以被1:2:1、1:3:2、1:2、1:3、1:5等不对称分割。

注:列的数量越多,页面就越“碎”,比较难把控,适用于业务信息量大、信息分组多、单个盒子内信息体积较小的页面设计;槽的宽度越大,页面越轻松简单;

8点网格

列跟槽的宽度是以网格作为基本单位来做增减,所以应该先定义好栅格的原子单位,目前zui普适易用的就是8点网格。设计页面时,也应该遵循8点规律。值得注意的是,列跟槽的值尽量取8的倍数,但不是非得是8的倍数。但产品中各类元素应该遵循8倍原则(图标、组件大小等)。8点网格系统有两种栅格形式,设计师可根据具体情况进行选择。将元素放到8的倍数栅格中,称之为“硬栅格”。元素之间的距离是8的倍数,称之为“软栅格”。

为什么是8点网格呢?

目前主流设备的屏幕分辨率基本能被8整除,可确保不同布局之间的视觉一致性,同时可以适配多种尺寸。

当前主流屏幕分辨率,基本上都能被8整除

以8为单位符合“偶数原则”。偶数原则在页面缩放中zui大程度的避免了0.5、0.75、1.25等次像素的出现,使页面显示效果更佳。

前端开源组件库比如Metronic、Antdesign等也是基于8的原子单位来设计,设计师使用以8为基本单位的栅格系统的话,相互对接会更加方便,也能更高品质的还原设计。

上一篇企业网站制作技术文章:    怎么建设营销型网站才能为企业带来一定的价值
下一篇企业网站制作技术文章:    2021年,这10种网页设计流行趋势值得关注!(二)

深圳网站制作最新案例推荐:

深圳网站制作相关文章阅读
关于我们
公司简介
人才招聘
售后服务
联系我们
网站制作套餐
基本型网站制作套餐
标准型网站制作套餐
品牌型网站制作套餐
综合型网站制作套餐
网站制作教程
网站建设常见问题
网站制作常见问题
网站设计常见问题
网站优化常见问题
企业邮箱常见问题
网站备案常见问题
联系方式
联系人:赵经理
电话:0755-61603557
邮箱:info@qifor.com
手机:13714247375
地址:广东.深圳宝安西乡宝源路鸿源大厦618

微信扫码咨询
© 2020 www.qifor.com all rights reserved
QQ在线咨询