热门标签 | HotTags
当前位置:  开发笔记 > 程序员 > 正文

网站建设之现在比较好的几个响应式网站案例

响应式设计现在已成为网页设计师工具包的标准组成部分。已经有足够长的时间,您可能会遇到麻烦,记住上次在项目中至少不包含一些响应能力。随着时间的推移,响应式设计已经相当成熟。一开始,它

文章目录[隐藏]

  • 华盛顿邮报
  • 99U
  • Vox
  • Etsy
  • 肯德基
  • 本田
  • 全国

响应式设计现在已成为网页设计师工具包的标准组成部分。已经有足够长的时间,您可能会遇到麻烦,记住上次在项目中至少不包含一些响应能力。

随着时间的推移,响应式设计已经相当成熟。一开始,它只是提供一些东西来适应不同的屏幕 – 即使不是那么好。但是,现代化的响应式设计引发了很多创造力。许多设计师不是将小屏幕视为一种负担,而是寻找新的方式来接受创造美丽和功能的东西的挑战。

有了这个既定的历史,我们认为看一些真正处于良好反应设计前沿的几个网站将是有趣的。

在这里,他们是完整的响应意见和一些想法,他们带给了什么(或者我应该说,平板电脑?):

华盛顿邮报

响应式设计的巨大挑战之一是采用内容繁重的网站,并使其在较小的屏幕上工作。华盛顿邮报做了一个梦幻般的工作,充分利用了任何屏幕的房地产。

虽然桌面版本利用多列网格,但平板电脑(人像)和手机版本可以很好地处理压缩内容的挑战。为了便于使用,小屏幕上的简单滑出标题导航是值得赞扬的。经验针对移动设备进行了优化,同时仍然很熟悉。

网站建设

网站建设

99U

99U是Adobe的创意专业人士在线杂志。爱上这个网站的一个方面是它的布局在任何屏幕尺寸上的简单。

使用浅色背景和大型黑色排版使得从桌面到手机都能轻松阅读。要查找的一个独特功能是,在移动设备上,网站的页脚实际上被隐藏在汉堡包菜单中。这个小技巧可以节省一些空间,并保留它以保持对内容的重视。

网站建设

网站建设

Vox

Vox是一个新闻网站,采用移动导航的不同路线。

标准文本导航栏代替无处不在的汉堡包菜单,随着屏幕变小而缩小。但是,不要在小空间中挤压几个项目,而是从菜单中逐渐删除类别,并隐藏在“更多”下拉菜单中。

网站建设

网站建设

Etsy

也许没有人比Etsy更好地设计给观众。狡猾的市场也有回应。其中的移动亮点是一个标题,以令人难以置信的清晰简洁的方式为您提供所有的基础知识(标志,链接到卖,登录和购物车图标)。

他们的商店按类别部分从多列照片卡转换为干净,垂直的图标菜单。这是工作中渐进增强的一个很好的例子。

网站建设

网站建设

肯德基

肯德基,手指舔鸡的良好供应商,在他们的网站上做了一些杰出的工作。

UX在不同的设备和屏幕尺寸之间是非常一致的。在所有视口上使用汉堡包菜单和水平滚动都意味着用户将会精确地知道该做什么 – 无论用户浏览网站是什么。

网站建设

网站建设

本田

许多事情的创造者,本田有几个产品线和品牌用户可能会感兴趣。他们在每个交替的横幅中使用颜色,使其很简单,找到你想要的(这在平板电脑和手机看起来特别酷)。

再次,这是一个在不同视口上带来非常相似的体验的网站。

网站建设

网站建设

全国

独立摇滚民族国家大力使用屏幕房地产。事实上,他们的网格式的新闻和信息布局贯穿于高清屏幕的整个宽度。

这种类型的布局很适合在页面宽度上全部输出。较小的屏幕被处理为类似的氛围,新闻项目并排列出,并且仍然容易阅读。该网站提醒您,响应式设计还包括利用更高的屏幕分辨率,而不仅仅是确保一切适合较小的分辨率。

网站建设

网站建设


推荐阅读
  • 无损压缩算法专题——LZSS算法实现
    本文介绍了基于无损压缩算法专题的LZSS算法实现。通过Python和C两种语言的代码实现了对任意文件的压缩和解压功能。详细介绍了LZSS算法的原理和实现过程,以及代码中的注释。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • HTML学习02 图像标签的使用和属性
    本文介绍了HTML中图像标签的使用和属性,包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项,帮助读者更好地理解和应用图像标签。 ... [详细]
  • 浏览器中的异常检测算法及其在深度学习中的应用
    本文介绍了在浏览器中进行异常检测的算法,包括统计学方法和机器学习方法,并探讨了异常检测在深度学习中的应用。异常检测在金融领域的信用卡欺诈、企业安全领域的非法入侵、IT运维中的设备维护时间点预测等方面具有广泛的应用。通过使用TensorFlow.js进行异常检测,可以实现对单变量和多变量异常的检测。统计学方法通过估计数据的分布概率来计算数据点的异常概率,而机器学习方法则通过训练数据来建立异常检测模型。 ... [详细]
  • 本文介绍了响应式页面的概念和实现方式,包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点,提出了选择方案的建议。同时,对于响应式页面的需求和背景进行了讨论,解释了为什么需要响应式页面。 ... [详细]
  • 本文介绍了Android中的assets目录和raw目录的共同点和区别,包括获取资源的方法、目录结构的限制以及列出资源的能力。同时,还解释了raw目录中资源文件生成的ID,并说明了这些目录的使用方法。 ... [详细]
  • 统一知识图谱学习和建议:更好地理解用户偏好
    本文介绍了一种将知识图谱纳入推荐系统的方法,以提高推荐的准确性和可解释性。与现有方法不同的是,本方法考虑了知识图谱的不完整性,并在知识图谱中传输关系信息,以更好地理解用户的偏好。通过大量实验,验证了本方法在推荐任务和知识图谱完成任务上的优势。 ... [详细]
  • 本文介绍了H5游戏性能优化和调试技巧,包括从问题表象出发进行优化、排除外部问题导致的卡顿、帧率设定、减少drawcall的方法、UI优化和图集渲染等八个理念。对于游戏程序员来说,解决游戏性能问题是一个关键的任务,本文提供了一些有用的参考价值。摘要长度为183字。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • 本文总结了在开发中使用gulp时的一些技巧,包括如何使用gulp.dest自动创建目录、如何使用gulp.src复制具名路径的文件以及保留文件夹路径的方法等。同时介绍了使用base选项和通配符来保留文件夹路径的技巧,并提到了解决带文件夹的复制问题的方法,即使用gulp-flatten插件。 ... [详细]
  • 前端性能优化无损压缩webp格式的图片
    一、什么是webpWebP格式,谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的23,并能节省大量的服务器宽带资源和数据空 ... [详细]
  • Redis底层数据结构之压缩列表的介绍及实现原理
    本文介绍了Redis底层数据结构之压缩列表的概念、实现原理以及使用场景。压缩列表是Redis为了节约内存而开发的一种顺序数据结构,由特殊编码的连续内存块组成。文章详细解释了压缩列表的构成和各个属性的含义,以及如何通过指针来计算表尾节点的地址。压缩列表适用于列表键和哈希键中只包含少量小整数值和短字符串的情况。通过使用压缩列表,可以有效减少内存占用,提升Redis的性能。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • 第四章高阶函数(参数传递、高阶函数、lambda表达式)(python进阶)的讲解和应用
    本文主要讲解了第四章高阶函数(参数传递、高阶函数、lambda表达式)的相关知识,包括函数参数传递机制和赋值机制、引用传递的概念和应用、默认参数的定义和使用等内容。同时介绍了高阶函数和lambda表达式的概念,并给出了一些实例代码进行演示。对于想要进一步提升python编程能力的读者来说,本文将是一个不错的学习资料。 ... [详细]
  • 一句话解决高并发的核心原则
    本文介绍了解决高并发的核心原则,即将用户访问请求尽量往前推,避免访问CDN、静态服务器、动态服务器、数据库和存储,从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例,以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]
author-avatar
喵咘噜_783
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有