关于
尚品介绍
尚品优势
产品标准
知名客户
发展历程
企业资质
工作环境
服务 方案

网站建设

企业集团网站建设 平台门户网站建设 政府事业网站建设 业务系统定制开发

移动互联网

APP开发IOS/安卓 微信公众号开发 微信小程序开发 H5交互设计制作

网络营销

搜索引擎优化推广 形象视觉基础系统 网站代运维服务 微信代运营服务

创新应用

可视化 短视频 接口程序 全景展示
案例
政府事业
学校教育
企业集团
营销推广
平台门户
大数据
移动端案例
新闻
网站建设
尚品动态
网站开发
营销推广
网站维护
ICP备案
城市新闻
联系
北京总部 天津分公司

尚品中国助力中国科学院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标签：

建站流程

  • 网站需求

  • 网站策划方案

  • 页面设计风格

  • 确认交付使用

  • 资料录入优化

  • 程序设计开发

  • 后续跟踪服务

  • 联系电话

    010-60259772

热门标签

最新文章

推荐新闻

更多行业
关于
尚品介绍 尚品优势 产品标准 知名客户 发展历程 企业资质 工作环境
服务
网站建设 移动互联网 网络营销 创新应用
案例
政府事业 学校教育 企业集团 营销推广 平台门户 大数据 移动端案例
新闻
网站建设 尚品动态 营销推广 网站维护 ICP备案 城市新闻
方案
高校集群解决方案 强军网建设解决方案 政府事业解决方案 智慧展会解决方案 海外房产解决方案 智慧景区解决方案
联系
北京总部 天津分公司

关于我们

关于我们

扫一扫关注尚品最新动态

2008年尚品中国成立于北京，尚品创立至今共为3000多客户成功完成任务，并上线使用。

我们专注高端网站建设，网站制作，品牌网站设计，集群建站、业务系统开发，APP开发，SEO优化等业务，为用户提供一站式解决方案，并且为用户获取更多用户流量，达到用户理想的业绩指标。

  • 北京总部
    010-60259772

    地址：中国 · 北京市大兴区西红门兴创国际中心A座501

  • 天津分公司
    022-58793660

    地址：中国 · 天津市河西区国际贸易中心C座3614

友情链接：
城市分站：
Copyright © 2020 尚品中国 版权所有　|　京ICP备09066521　|　公安机关备案号:11011502003910免责声明 尚品专注高端网站建设，系统平台开发，APP开发，SEO优化服务

免责申明

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

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

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

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

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

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

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

北京010-60259772

天津022-58793660

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

免责申明

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

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

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

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

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

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