响应式设计和移动优先

移动端造型

标准尺寸的平板电脑

再次使用 JavaScript！

哇！我的桌面屏幕好大啊！

不久前，有一个代码新手聊天讨论了移动优先的概念。

很多人回应说，移动优先开发只是一时的热潮，或者一个流行词。然而，我不同意。你看，移动优先开发建立在这样一个假设之上：任何在手机上能用的东西，在电脑上也能用。反之亦然？

响应式设计的概念正是基于这一观察。当你设计一个网站并支持各种屏幕尺寸时，首先要考虑它在最小屏幕上的显示效果。将其设为默认设置！然后，随着屏幕空间的增加，再根据更大的屏幕进行调整。这样，你就可以始终为小屏幕设计样式，并主动针对小屏幕进行优化。

移动端造型

以我的网站为例。我有一个导航栏，h1里面有一个标签。我给h1页面上的其他元素设置了底部外边距的样式，但在这种情况下，这会在垂直导航栏中留下我不想要的空白！

我还想让h1导航栏中的这个特定内容的字体更粗。那就让我们添加这些内容吧。

#header h1 {
  font-weight: 900;
  margin-bottom: 0;
}

我不需要做任何其他操作就能让它在我的手机上看起来更美观。而且它在其他尺寸的设备上也能正常显示，太棒了！

标准尺寸的平板电脑

嗯，再想想，h1看起来还不错，但在我的平板电脑上用垂直导航栏，不充分利用可用的水平空间，感觉有点奇怪。所以，我想在屏幕稍大一点的时候改变一下页面的外观。

这时，媒体查询就派上用场了。媒体查询可以将任何样式部分的范围限定到特定的屏幕尺寸，这非常强大。然而，由于我们默认所有内容都适用于最小屏幕，因此我们实际上希望此媒体查询仅对大于特定尺寸的屏幕有效。

@media (min-width: 600px) {
  #header nav ul li {
    display: block;
  }
}

请记住，我们处理的特定像素尺寸是通用平板电脑尺寸。针对这些尺寸，有多个“推荐”断点。

再次使用 JavaScript！

对于那些不明白这个笑话的人，我深感抱歉。

这样看起来就好多了。现在我们有了典型的水平导航。不过，这并不是唯一的方法。响应式设计也可以用 JavaScript 来实现。

skel.init({
    reset: 'full',
    breakpoints: {
        global: { range: '*', href: '/css/style.css'},
        narrow: { range: '-980', href: '/css/style-narrow.css'}
    }
})

请注意，全局样式始终存在。

我们仍在使用 CSS 来推广不同的风格，但我们没有使用媒体查询，而是使用根据屏幕大小触发并使用适当样式表的 JavaScript 代码。

哇！我的桌面屏幕好大啊！

好了，您已经来到了广阔的绿地和无限可能的国度！谁能想到笔记本电脑的屏幕竟然如此奢华呢？这时，您可能会开始考虑在网格中连续显示更多项目。又或者，您可能想将之前垂直显示的内容改为水平显示。想要更多框架？一切由您决定！世界尽在您的掌控！

@media (min-width: 775px) {
  #header h1 {
    margin-left: 5em;
    margin-bottom: 1em;
  }
}

我们可以疯狂地把那个边距加回来。我们现在有空间了！

我们以前每次只显示一个元素的网格？嘘，这已经是过去式了。宝贝，一次显示三个！

@media (min-width: 775px) {
 #speakwrap {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr;
    grid-template-areas: 'conference';
    grid-gap: 10px;
    padding: 1em;
  }
}

我有点开玩笑了。但当你达到这个程度时，拥有如此大的灵活性确实很棒。而且实际上，从你最有限的点开始扩展比试图缩减更容易。

如果您正在寻找更多类似的内容，请查看：
JS 层...样式混合
CSS 层
Javascript 层