如何设计响应式网站？
来源：尚品中国|
类型：网站百科|
时间：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标签：
.png)
推荐新闻
更多行业-
专业珠宝网站建设
尚品中国网站建设服务商是一支专业的珠宝网站建设及珠宝网站运营SEO策划...
2012-07-23 -
什么是WEB标准?表现层技术是什么
Web标准似乎是近两年来国内出现的一个新名词。大概是从2003年开始，...
2014-07-17 -
尚品中国后台视频教程之二栏目管理及内容维护
这个视频主要介绍网站的二级栏目以及内容如何添加,删除,修改等等.......
2014-07-27 -
防火墙的局限性
大多数防火摘都侧重于对外部数据包进行防范，而忽略了来自内部的一钱安全隐...
2014-06-17 -
杭州网站建设有哪些指导方针？
企业网站建设是企业实施网络营销的首选，一个企业网站建设的成功很大程度上...
2021-07-08 -
建设响应式网站一般有哪些费用？
由于响应性网站具有许多优点，如能主动匹配不同尺寸的显示终端、便于实现、...
2020-05-25
如果您的网站可以增加转化次数并提高客户满意度，该怎么办？
预约专业咨询顾问沟通！
Copyright © 2021 尚品中国 版权所有 | 京ICP备09066521号
| 公安机关备案号:11011502003910
免责声明
诚信企业
尚品专注高端网站建设，系统平台开发，APP开发，SEO优化服务
尚品专注高端网站建设，系统平台开发，APP开发，SEO优化服务
免责声明
非常感谢您访问我们的网站。在您使用本网站之前，请您仔细阅读本声明的所有条款。
1、本站部分内容来源自网络，涉及到的部分文章和图片版权属于原作者，本站转载仅供大家学习和交流，切勿用于任何商业活动。
2、本站不承担用户因使用这些资源对自己和他人造成任何形式的损失或伤害。
3、本声明未涉及的问题参见国家有关法律法规，当本声明与国家法律法规冲突时，以国家法律法规为准。
4、如果侵害了您的合法权益，请您及时与我们,我们会在第一时间删除相关内容!
联系方式：010-60255689
电子邮件：394588593@qq.com
