在现代世界中，不可否认响应式设计的价值，但是要完全理解如何正确设计响应式布局存在一些困难。
响应式Web设计的概念已经渗透到整个Web中，并成为前端开发人员的必备条件。
该主题可能会持续进行，因为网站上有如此众多的独特区域，但是专注于各个元素可以帮助您更好地理解用户的目标，以及如何通过响应式设计实现这些目标。
在将这些建议应用于您自己的工作时，请采纳这些建议，并确保在设计界面时要牢记用户行为。
我想介绍标题，徽标和导航菜单的 设计提示 ，因为它们与响应式设计有关。
更薄的导航栏
但是较小的屏幕没有相同的空间，应根据需要进行限制。
在大屏幕上，通常有很大的标题，甚至带有多层链接层的超大标题也是正常的。
固定的标头在较小的设备上也应缩小 ：这为内容留出了更多空间，但仍使读者可以直接访问标头和导航。
由于本机移动应用程序通常具有固定的标头 ，因此这也是响应式设计中的常见做法。
以全尺寸显示器和移动设备上的Cartoon Brew布局为例。
这会使徽标和可单击的导航菜单都变小，但是它们与相对屏幕空间成正比 。
在600px的断点处，导航缩小到页面上高度的一半。
这意味着它在打开时会覆盖页面上的内容 ，因此为此留出足够的空间很重要。
还可以考虑将Cartoon Brew在移动屏幕上有一个下拉框作为响应菜单。
这对于响应式设计更好，因为导航栏越薄，则在较小的移动屏幕上会留出更多的内容空间 。
顶部导航栏在滚动时保持固定，但在较小的设备上缩小 。
在Jacksonville Art Walk网站上可以找到类似的例子。
在宽屏显示器上看起来很棒，但是对于较小的屏幕来说太详细了。
导航栏中的每个链接都有一个相关的图标，该图标附加在文本链接上。
图标在下拉菜单中隐藏，因为它们太小且在较小的设备上过于狭窄。
Art Walk导航会变为一个下拉菜单，该菜单在770px断点附近具有固定链接。
如果您不希望标题保持固定，那是完全可以的，但是您仍可能需要缩小标题以节省页面顶部的空间。
在设计响应式标题时，在设计导航栏时，请始终考虑整个屏幕空间 。
图标化徽标
这意味着您可以始终将这种徽标图标化 （是一个真实的词 ） ，直至完整版本的符号 。
大多数徽标都包含一些文字和图标或图形来代表品牌。
您确实失去了全尺寸徽标的浮华和魅力，但这就是您可能需要为干净的响应式布局付出的代价。
这对于响应标题是一种强大的技术，因为始终没有足够的空间容纳完整的徽标。
查看Web Designer新闻的徽标，并查看其在调整浏览器大小时的变化。
也许并不是每个人在初次访问该网站时都会识别该图标，但是由于有了模式识别，这并不是一个大问题。
图标图标中也使用了这个粉红色的小图标，因此很容易得出一些结论，而无需深入到站点。
人们已经在Internet上停留了很长时间，才知道页面的左上角通常是为徽标保留的。
Young And Hungry的标题使用亮绿色的文字作为徽标，最终凝结为文字“ Y＆H”。
您不必总是依靠图形来实现这种浓缩徽标技术。
但是，这表明可以将徽标简化为图形和文本，并且两种变体在较小的屏幕上占用的空间也较小。
如果品牌商标不易识别为单个字母，则可能无法在每个网站上都使用此功能。
处理全屏背景
这是一项强大的技术，但通常在大型显示器上效果最佳。
许多目标网页使用全屏背景吸引更多注意力。
通常，设计人员要么将背景图像移出某个断点，要么将图像本身重新对齐以适合窗口。
那么，如何在较小的屏幕上处理呢？
无论屏幕大小调整了多少，背景图像始终使焦点保持可见。
Cap Radio Raffle在其主页上使用此技术。
始终保持焦点在视野中，并调整图像容器的大小以与设备成比例。
这种解决方案通常需要一些CSS定位，但是当您掌握它时，它确实很简单。
Mashable的首页将特色图片背景用作覆盖整个布局的热门新闻。
除了出于美学原因的大背景之外，您还可以将大图像用于页面内容。
如果设计得当，Mashable的解决方案仍然是一种处理博客和杂志版面的全屏照片的好方法。
这样做很困难，因为故事发生变化时，特色图像也会发生变化，因此必须精心策划照片。
它们的响应式布局在保持中心焦点的同时压缩了图像 。
简化导航
这意味着，如果您具有多层下拉菜单，则可能需要放弃一些链接。
为较小的屏幕进行改装时， 请在导航中保留尽可能多的链接 ，并使其易于访问 。
例如， Kidscreen使用带有小箭头图标的弹出菜单，这些箭头图标指示响应菜单中的子链接。
尽管如果您有正确的策略，仍然可以保持所有下拉列表完好无损。
它简单有效，并且已被大多数智能手机用户广泛理解为“菜单按钮”。
许多人反对汉堡包菜单，但是我已经开始接受它作为长时间导航菜单的必要项目。
CyberChimps是一个很好的例子，它使用垂直下拉列表而不是滑入式。
实际上，很难找到不依赖于三栏式汉堡菜单的响应式网站。
菜单从上方放置，带有用于链接的大块元素 。
CyberChimps的导航结构被重新排列以向下滑动到页面顶部。
力求在您的整个响应式标头中遵循这一理念，您的设计将得到大幅改善。
单击更多区域并使用较大的链接文本 ，导航页面的过程变得更加简单。
建立你自己的
尽管有很多工具可以帮助您，但真正理解的唯一方法是通过练习。
有了这些技巧，可以轻松构建可用的响应头。
我还列出了一些其他的响应标头资源，您可以在下面查看。
因此，请随身携带这些技术，然后开始构建网站！
- 创建基本的移动CSS响应式导航菜单 （teamtreehouse.com）
- 自适应网站标题的最佳做法 （ux.stackexchange.com）
- 如何使标题图像正确响应？ （stackoverflow.com）
翻译自: https://www.hongkiat.com/blog/responsive-headers-logo-tips-pitfalls/