关于前端:Mobile-Dev-Weekly-383移动先行-or-桌面先行

🥳 欢送有趣味的小伙伴，一起做点有意义的事！本文译者：Rick Ma

我发动了一个 周刊翻译打算，仓库地址，拜访地址

当初还很缺气味相投的小伙伴，纯属个人兴趣，当然对于晋升英语和前端技能也会有帮忙，要求：英语不要差的离谱、github 纯熟应用、有恒心、虚心、对本人做的事负责。

想参加的小伙伴，能够 wx 私信，也能够给仓库发 issue 留言，我博客也有具体的集体联系方式：daodaolee.cn

不晓得你是否常常思考新我的项目首先应该适配挪动端还是桌面端？最近，我在 Twitter 发动了一次对于此项的投票，总票数为 648 票，比例如下：

• 挪动优先：33.3%
• 桌面优先：21.9%
• 两者混合：24.7%

在下文中，咱们将一起理解每种办法的含意和一些响应式设计技巧，而后再去探讨在明天这些办法是否实用。

简介：挪动优先和桌面优先的含意

挪动优先 意味着在网站开发时，咱们首先以较小的视口尺寸编写 CSS，而后应用 CSS 媒体查问来优化大视口的体验

思考以下示例：

.section {padding: 2rem 1rem;}

@media (min-width: 62.5rem) {
    .section {
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 4rem 2rem;
    }
}

咱们为挪动端设施配置了一个 padding 属性，当视口大小足够大时，他应该会是个领有更大 padding 的弹性盒

这仅仅是一个简略的例子，能够设想一下们有一个足够大的网站或挪动 APP，那么咱们要设置的货色就会多得多。

而当咱们采取 桌面优先 的形式时，状况刚好相同

.section {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
}

@media (max-width: 62.5rem) {
    .section {
        display: block;
        padding: 2rem 1rem;
    }
}

咱们首先为较大的视口编写 CSS，而后再应用媒体查问为小视口更改 CSS

挪动优先的开发流程是怎么样的？

你是喜爱间接在浏览器 F12 调成挪动设施进行开发，不去适配桌面？还是更喜爱两者同时进行？也就是在优先写挪动设施款式的同时，也去适配桌面的视口尺寸。

这是我可能构想到的两种状况：

1. 先解决挪动设施所有页面的 CSS 款式，最初再去适配桌面端
2. 同时进行，每做好一个挪动端的页面或组件，都先对于大视口进行适配。

你通常应用哪一种哪？对我来说，第二种是更适宜我的形式，这样能使我更专一我以后组件或页面，而且也会缩小编写 CSS 的谬误。

当你应用第一种办法时，很可能会为平板电脑或者桌面端重写 CSS，咱们来看上面这张图：

咱们拿 .hero 选择器来做例子：

.hero {
  display: flex;
  align-items: flex-end;
  background-image: url('hero.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__title {font-size: 1rem;}

.hero__thumb {display: none;}

@media (min-width: 60rem) {
  .hero {
    align-items: center;
    background-image: initial;
    background-color: #7ecaff;
  }

  .hero__title {font-size: 2rem;}

  .hero__thumb {
    max-width: 320px;
    display: block;
  }
}

就像上述代码所写的那样，.hero选择器在挪动端有一个背景图片，而在桌面端则是一个纯色背景，并且有一张位于最左边的图片。就像你所看到的那样，这是挪动端优先的 CSS 款式，除了 font-size 和background之外，咱们没有太多须要重写的中央。

那么导航哪，挪动端优先的形式会怎么写？

.nav {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding-top: 2rem; /* 导航按钮的空隙 */
}

.nav__toggle {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.nav__item {
    padding: 1rem;
    display: block;
}

.nav__item:not(:last-child) {border-bottom: 1px solid #fff;}

/* 桌面端款式 */
@media (min-width: 60rem) {
    .nav {
        position: initial;
        width: initial;
        height: initial;
        overflow-y: initial;
        display: flex;
        align-items: center;
        padding-top: 0;
        background-color: blue;
    }

    .nav__toggle {display: none;}

    .nav__item:hover {
        color: blue;
        background-color: initial;
    }

    .nav__item:not(:last-child) {
        border-bottom: 0;
        border-left: 1px solid #fff;
    }
}

不晓得你有没有看进去，桌面端要重写的款式大略跟挪动端的已有款式持平，这可不是件坏事。

另外，有时候也会因为 CSS 个性导致一些莫名其妙的问题，比如说我心愿从 .nav_item 中删除border-bottom。

.nav__item {border-bottom: 0;}

这并不会起作用，因为 :not 伪类在这种状况下领有更高的优先级

应用如下办法，会使之失效：

.nav .nav__item {border-bottom: 0;}

/* 或者 */

.nav__item:not(:last-child) {
    border-bottom: 0;
    border-left: 1px solid #fff;
}

桌面端优先的开发流程是怎么的？

仍旧还是导航栏的案例，咱们来看一下桌面优先的计划是怎么的？

.nav {
    display: flex;
    align-items: center;
    background-color: blue;
}

.nav__toggle {
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.nav__item {
    padding: 1rem;
    display: block;
}

.nav__item:hover {
    color: blue;
    background-color: initial;
}

.nav__item:not(:last-child) {
    border-bottom: 0;
    border-left: 1px solid #fff;
}

@media (max-width: 25rem) {
    .nav {
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        padding-top: 2rem; /* Space for the toggle */
    }

    .nav__toggle {display: block;}

    .nav__item:not(:last-child) {border-bottom: 1px solid #fff;}
}

当以桌面端为先时，咱们能够看出，笼罩次数绝对于挪动端优先少了许多。这不是很有意思吗？次要的起因是咱们通过媒体查问的 max-width 审查了特定视口所有的特定款式。

我提倡咱们应该先为桌面端编写 CSS 款式，而后再去适配挪动端。

通过上面这张比照图咱们能够看出，以桌面优先编写 CSS 款式看起来更短并且没有不必要的反复（好吧，他有一点点~~）

小学生才做抉择，成年人两个都要

对我而言，我不愿去拘泥于任何一种办法。而我更违心尝试去将两种办法联合起来。
这意味着，咱们须要先编写根本的款式，而后再去思考在挪动端和桌面端下会产生什么？
我喜爱 Elad Shechter 在这篇文章中提到的。

让咱们来举一个形象的例子：

.nav {/* 根底款式：不波及任何窗口尺寸 */}

/* 桌面端款式 */
@media (min-width: 800px) {.nav { ...}
}

/* 挪动端款式 */
@media (max-width: 799px) {.nav { ...}
}

就像你看到的那样，媒体查问的范畴对应着不同的窗口大小，这意味着咱们不会做任何笼罩属性的操作。这种办法对于在挪动端和桌面端看起来齐全不同的组件很有用。在咱们的例子中，他就是导航。

然而，对于像 <section> 这样的，在挪动端和桌面端区别不大的，混合形式起不到太大的作用

.section {padding: 1rem;}

/* 桌面款式 */
@media (min-width: 800px) {
    .section {padding: 2rem 1rem;}
}

我应该如何解决响应式设计

在有些时候，我会感觉探讨挪动后行还是桌面后行没那么重要，因为古代 CSS 给咱们提供了用更少 CSS 代码编写响应式布局 CSS 款式的办法

话虽如此，我认为挪动后行和桌面后行的争执将仅限于在特定的视口下显示或暗藏元素。除了那些特地简单的和特定视口下变化很大页面或组件。

让咱们找一个事实中的案例去阐明这些概念：

在挪动设施和桌面设施上有一些不同的组件，比方导航栏和题目，其余中央仅有一些轻微的差异。对于题目，咱们能够通过 min-width 和max-width的混合应用来确定特定视口下的款式设计。

然而，<section>和文章网格就须要应用根本款式，而后将 min-width 用在必要的中央。

把思维放开，不要把他关在笼子里。这只是我手头上的一个设计，不须要严格的依照我的形式去做。当初让咱们展现更多细节

如果题目和导航采纳挪动优先的形式，就会导致大量的 CSS 属性反复，这不是咱们提倡的形式。上面是我想到的办法：

.header {/* 根底款式 */}

/* 桌面端款式 */
@media (min-width: 1000px) {
    .nav__toggle,
    .nav__close {display: none;}
}

/* 挪动端款式 */
@media (max-width: 999px) {
    .nav {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #4777dB;
    }
}

对于 <section> 局部，咱们应用弹性盒去解决行与列的款式，也能够用于从新排序或挪动元素

<section class="hero">
    <div class="wrapper">
        <img src="thumb.jpg" alt="" />
        <h2><!-- Headline --></h2>
        <p><!-- Description --></p>
    </div>
</section>

.hero {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1000px) {flex-direction: row;}

@media (max-width: 999px) {
    .hero__thumb {order: -1;}
}

在这里，order:-1这个属性我只在 max-width 确定范畴中应用了一次。
我能够做这样的事：

.hero__thumb {order: -1;}

@media (min-width: 1000px) {
    .hero__thumb {order: initial;}
}

怎么样？没有看到反复吧哈哈哈~
此外，请留神如果在弹性盒中应用了order，会导致视觉程序与 HTML 中的 DOM 程序不匹配

在上面这个可视化图表中，解释了我如何抉择挪动后行还是桌面后行：

防止双断点媒体查问

对 min-width 和max-width应用雷同的视口大小可能会导致难以想象的问题。

@media (max-width: 500px) {
    .nav {display: none;}
}

@media (min-width: 500px) { 
    .nav__toggle {display: none;}
}

下面这段代码看起来能够做到无缝连接，然而在大多数的状况下，你会遗记测试一个重要的断点：500px，即两个断点之间那一像素的距离。在这个断点处，导航和开展按钮都不可见。

在 F12 的挪动模式下，如果不手动输出 500px, 很难发现这个问题。
为防止出现这种问题，请尽量避免在 min-width 和max-width中应用雷同的值。

@media (max-width: 499px) {
    .nav {display: none;}
}

@media (min-width: 500px) { 
    .nav__toggle {display: none;}
}

你认为这个问题是我发现的吗？
哈哈哈哈，其实是我从 Debugging CSS 这本书中借来的。

设计师怎么看挪动后行

我本人也是一名设计师，坦率了讲，我不喜爱挪动后行的设计。

• 挪动后行的设计图是有限度的，很难施展创意
• 解决过高的设计很令人心烦，因为你要一直的将设计图高低滚动

而桌面后行的设计图就要好得多，至多对我来说，它能够立刻尝试我的新想法，而且我不须要通过频繁的高低滚动来查看设计图有哪些不合理的中央。

古代 CSS 缩小了思考挪动后行还是桌面后行的必要

有很多当下和行将推出的 CSS 性能，它将使响应式设计更容易实现

Flexbox Wrapping

在 Geoffrey Crofte 的文章 如何不实用媒体查问制作响应式卡片中，他摸索了如何在不应用媒体查问的状况下制作响应式卡片。我会在这里解释他的基本概念，你也能够抉择浏览原文理解更多细节。

设置一个固定的 flex-basis 值，并容许 item 在须要的时候增长和伸缩，这能够实现一个无媒体查问的响应式组件。

这个示例展现了空间有余时卡片的外观

CSS 网格布局和 minmax 函数

幸好有了CSS Grid，咱们能够领有不依赖媒体查问的响应式网格布局，思考以下示例：

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

这是一个响应式网格，为每个我的项目提供最小 200px 的宽度。
如果没有 CSS 网格，咱们就须要应用媒体查问来依据视口扭转元素宽度。

在本文理解更多无关 CSS Gird 和Minmax()

视口单位与 clamp 函数

将视口单位和 clamp 函数联合应用能够无效缩小无关 font-size,padding,margin 等元素尺寸的应用。

.title {font-size: clamp(16px, (1rem + 5vw), 50px);
}

.hero {padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

.sidebar {flex-basis: max(30vw, 150px);
}

容器查问

CSS 新个性 容器查问当初在 Chrome 下可用了。有了他们，咱们能够在不应用媒体查问的状况下做很多事。

思考以下示例：

这是一个基于容器宽度的响应式分页。不须要媒体查问！

.wrapper {contain: layout inline-size;}

@container (min-width: 250px) {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .pagination li:not(:last-child) {margin-bottom: 0;}
}

@container (min-width: 500px) {
  .pagination {justify-content: center;}

  .pagination__item {display: block;}
}

就像我展现的这样，古代 CSS 反对咱们不通过媒体查问的形式制作响应式布局。那么问题来了，咱们还须要思考挪动后行还是桌面后行的问题吗？

相干链接

The State Of Mobile First and Desktop First – AHMAD SHADEED

翻译打算原文