尚品中国助力中国科学院EDA中心官网建设

类型:研究所 | 科学院 了解更多

如何设计响应式网站?

来源:尚品中国| 类型:网站百科| 时间:2018-06-01
目前的响应式设计一般考虑四类尺寸(宽度,高度一般按照 9:16 的比例进行推算,再减掉浏览器上下的导航栏高度):
  • 手机:360px(5寸左右的手机,最小一般兼容到320px即可,再往下的机子基本都是淘汰的差不多了,可以不用管了)
  • 平板:361 - 1024 px(现在即便11寸的笔记本也不大会用到1024的分辨率了,所以直接划入平板)
  • 主流PC显示器:1025 - 1920 px(1080P是目前桌面显示器的主流)
  • 超清PC显示器:1921 - 5120 px(主要考虑2K、4K、5K等超高分辨率,为未来考虑)

1. 手机
响应式设计的正确流程,应该是移动优先的,然后逐渐放大到更大的尺寸,因此应该优先设计手机端的样式,而不是设计好传统的桌面网站之后再去尝试压缩到手机上。至于如何设计移动Web的界面这里就不细述了,相信各位设计师朋友们都有自己的创意。

2. 平板

平板端基本就是放大版的移动端,直接照搬即可完成75%的工作,但直接照搬的话单个元素会显得太大,毕竟页面分辨率是之前的差不多 3 倍。因此平板端的布局可以比在手机端多划分几列,比如在手机端直接一个 ListView 下来的设计,到平板端可以分成 2~3 列,在手机端全屏宽度的按钮,在平板端会显得太长,可以考虑适当缩短,保留足够的高度以供手指点按即可,在移动端必须要隐藏的导航、菜单等可以考虑直接展示出来,以填补多出来的空间。

3. 主流PC显示器

这个没什么好讲的,传统的 Web 设计想必大家早已经轻车熟路了。这里唯一要注意的是保持布局的连贯性,响应式设计的 PC 端是由平板端放大和适配而来的,可以展示更多的内容,但不应该和平板端差别太多,要确保用户能够识别出两者是同一个网站。

4. 超清PC显示器

这在过去是不需要考虑的,那时候 1080P 还是个很火热的概念,1024px 还是笔记本的分辨率。但现在随着 2K/4K 屏的逐渐普及,这部分用户的占比开始一点点多起来,问题逐渐凸显,变得不可忽视了。没有特别适配方案的网页在这些环境下看起来会有两种变化:原本适配全屏的页面会被拉伸得太宽,原本固定宽度的页面两侧会留下大片的空白。面对这样的事实,需要设计师们在设计适配方案的时候考虑到页面在这些设备上的样子。
来源声明:本文章系尚品中国编辑原创或采编整理,如需转载请注明来自尚品中国。以上内容部分(包含图片、文字)来源于网络,如有侵权,请及时与本站联系(010-60255689)。
TAG标签:

免责申明

非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。

1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。

2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。

3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。

4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!

联系方式:010-60255689
电子邮件:394588593@qq.com

现在就与专业咨询顾问沟通!

北京010-60259772

天津022-58793660

信息保护中请放心填写
微信咨询:
北京
北京
天津
天津
咨询

免责申明

非常感谢您访问我们的网站。在您使用本网站之前,请您仔细阅读本声明的所有条款。

1、本站部分内容来源自网络,涉及到的部分文章和图片版权属于原作者,本站转载仅供大家学习和交流,切勿用于任何商业活动。

2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。

3、本声明未涉及的问题参见国家有关法律法规,当本声明与国家法律法规冲突时,以国家法律法规为准。

4、如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!

联系方式:010-60255689
电子邮件:394588593@qq.com