全局样式

视口标签

根据设备的系统分辨率、宽度进行渲染，并禁止设备对页面的默认缩放。

  1. <meta name="viewport" content="width=device-width, initial-scale=1">

重置样式

每个浏览器都给标签添加了一些默认样式，但是它们的表现并不一致，所以需要引入一些重置性样式来消除这些差异。使用 reset.css 重置样式以消除不同浏览器下各个元素的样式差异，强制吧所有元素样式都放在一个起跑线。
使用 normalize.css ，与 reset.css 不同的是它在保留浏览器默认样式的基础上，通过新增代码使样式在不同浏览器下的行为保持一致，并且修复一些常见的 bug 。

自定义的全局样式

页面中有些样式是公用的，例如你不需要 ul 带有浏览器默认的内外边距，不需要超链接带有下滑线，统一设置字体等，这些样式在整个站点保存一致。将这些样式放在全局样式中维护，取名为 global.css 。

无懈可击的导航栏

使用 calc 渐进增强。
使用 padding 拓展 a 的点击区域，提升用户体验。

参考

【1】高性能响应式 Web 开发实战 @ 李光毅