【译】怎样编写移动优先的CSS (实用、赞）

缺乏、安全感 2022-04-18 02:11 219阅读 0赞

原文出处：[https://www.cnblogs.com/huansky/p/6095854.html][https_www.cnblogs.com_huansky_p_6095854.html]

**原文：[How To Write Mobile-first CSS][]**

**作者：**

**译者：huansky**

构建响应式网站是今天前端开发人员必备的技能。 当我们谈论响应式网站时，移动优先这个词立刻就会浮现。

我们知道从移动优先的角度设计的重要性。 不幸的是，关于移动优先的配置方法很少提及。

今天，我想和大家分享一下移动优先的样式方法，为什么它会更好，以及如何运用它的魔力。

注意：如果您正在学习使用Susy构建响应式布局，本文将非常有用。

## 什么是移动优先和桌面优先方法？ ##

让我们了解移动优先和桌面优先之间的差异，然后再深入探讨为什么移动优先方法更好。

移动优先的样式方法意味着样式首先应用于移动设备。 高级样式和其他覆盖更大的屏幕然后通过媒体查询添加到样式表。

这种方法使用 `min-width`媒体查询。

这里有一个简单的例子：

![复制代码][Image 1]

// This applies from 0px to 600px
    body {
      background: red;
    }
    
    // This applies from 600px onwards
    @media (min-width: 600px) {
      body {
        background: green;
      }
    }

![复制代码][Image 1]

在上面的例子中， `<body> `在 600px 以下是红色背景。 在 600px 及以上它的背景就会变成绿色。

另一方面，桌面首先的样式方法意味着样式首先应用于桌面设备。 然后通过媒体查询将较小屏幕的高级样式和覆盖添加到样式表中。

这种方法使用 `max-width`媒体查询。

这里有一个简单的例子：

![复制代码][Image 1]

// This applies from 600px onwards
    body {
      background: green;
    }
    
    // This applies from 0px to 600px
    @media (max-width: 600px) {
      body {
        background: red;
      }
    }

![复制代码][Image 1]

`<body>`是绿色背景颜色。 如果屏幕低于600像素，背景颜色将变为红色。

## 为什么代码移动优先？ ##

较大屏幕的代码通常比较小屏幕的代码更复杂。 这就是为什么编写移动优先有助于简化您的代码。

考虑一种情况，你有一个网站的内容侧栏布局。 `.content`占据了100％的宽度在移动端，桌面上占 66％。

![mw-5.png][]

大多数时候，我们可以依靠默认属性来为较小屏幕设置内容样式。 在这种情况下，一个 `<div> 默认情况下`具有100％的宽度。

如果我们使用移动优先方法，Sass 代码将是：

![复制代码][Image 1]

.content {
      // Properties for smaller screens.
      // Nothing is required here because we can use the default styles
    
      // Properties for larger screens
      @media (min-width: 800px) {
        float: left;
        width: 60%;
      }
    }

![复制代码][Image 1]

如果我们改用桌面优先，大多数时间，我们将不得不修复较小视口的默认属性。 Sass代码的相同结果是：

![复制代码][Image 1]

.content {
      // Properties for larger screens.
      float: left;
      width: 60%;
    
      // Properties for smaller screens.
      // Note that we have to write two default properties to make the layout work
      @media (max-width: 800px) {
        float: none;
        width: 100%;
      }
    }

![复制代码][Image 1]

通过这个例子，我们节省了两行代码和几秒钟来思考令人费解的CSS。 想象一下，如果你在一个更大的网站上工作，这将节省你多少时间和精力。

大多数时候的 `min-width`的查询就足以帮助你编写一个网站。 然而也存在这样的实例，组合使用 `min-width`和 `max-width`查询有助于减少复杂度，而这通过单一的 `min-width`查询是不可能达到的。

让我们来探讨一些这样实例。

## 在移动优先方法使用 max-width 查询 ##

`Max-width`查询开始发挥作用，当你想要样式在一定的视区大小以下受到限制。 `min-width`和 `max-width`两者的结合 ，将有助于约束两个不同的视口尺寸之间的样式。

考虑一个相册缩略图的情况。 此图库在较小视口上连续显示3个缩略图，在较大视口上连续显示4个项目。

![mw-1.png][]

因为每个项目之间没有空格，所以它很简单：

![复制代码][Image 1]

.gallery__item {
      float: left;
      width: 33.33%;
      @media (min-width: 800px) {
        width: 25%;
      }
    }

![复制代码][Image 1]

如果每个项目中有空格，它就会变得很复杂。

![mw-2.png][]

假设这些空格占据了宽度的5％：

![复制代码][Image 1]

.gallery__item {
      float: left;
      width: 30%;
      margin-right 5%;
      margin-bottom: 5%;
    }

![复制代码][Image 1]

我们也将不得不设计最后的（第3项）的 `margin-right 为`0，以确保它不会被推下到下一列。

![复制代码][Image 1]

.gallery__item {
      float: left;
      width: 30%;
      margin-right 5%;
      margin-bottom: 5%;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }

![复制代码][Image 1]

此代码还必须适用于行中有四个项目的情况。 如果我们根据最小宽度查询我们上面...

![复制代码][Image 1]

.gallery__item {
      float: left;
      width: 30%;
      margin-right 5%;
      margin-bottom: 5%;
      &:nth-child(3n) {
        margin-right: 0;
      }
    
      @media (min-width: 800px) {
        width: 21.25%; // (100% - 15%) / 4
        &:nth-child (4n) {
          margin-right: 0;
        }
      }
    }

![复制代码][Image 1]

![mw-3.png][]

不能正常工作的原因是因为我们指定了每个第3项的 `margin-right 为` 0。 此属性将级联到更大的视口，并打破我们想要的模式。

我们可以修复每个3的倍数的项目的 `margin-right`属性为 5％：

![复制代码][Image 1]

.gallery__item {
      // ...
      @media (min-width: 800px) {
        // ...
        &:nth-child (3n) {
          margin-right: 5%;
        }
        &:nth-child(4n) {
          margin-right: 0%;
        }
      }
    }

![复制代码][Image 1]

这并不是一个非常好的办法，因为我们要重复使用 `margin-right`：5％ ，如果我们使用更大的显示屏幕就不得不做改变。

我们应该保持代码尽可能DRY**（不知道怎么翻译）**。

更好的方法来约束 `nth-child(3n) 是`在应有的视口中使用 `max-width`查询。

![复制代码][Image 1]

.gallery__item {
      float: left;
      margin-right: 5%;
      margin-bottom: 5%;
      @media (max-width: 800px) {
        width: 30%;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    
      @media (min-width: 800px) {
        width: 21.25%; // (100% - 15%) / 4
        &:nth-child (4n) {
          margin-right: 0;
        }
      }
    }

![复制代码][Image 1]

![mw-2.png][]

这是可行的，因为 `max-width`将其限制在800像素内，这样其他饰扣下就不会受影响。

现在想象一下，如果你有一个更大的视口，你想在画廊中每行显示5项。 这时可以同时使用 `min`和 `max-width `。

![复制代码][Image 1]

.gallery__item {
      float: left;
      margin-right: 5%;
      margin-bottom: 5%;
      @media (max-width: 800px) {
        width: 30%;
    
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
    
      // combining both min-width and max-width queries
      @media (min-width: 800px) and (max-width: 1200px) {
        width: 21.25%; // (100% - 15%) / 4
        &:nth-child (4n) {
          margin-right: 0;
        }
      }
    
      @media (min-width: 1200px){
        width: 16%; // (100% - 20%) / 5
        &:nth-child (5n) {
          margin-right: 0;
        }
      }
    }

![复制代码][Image 1]

![mw-4.png][]

## 一段录像！ ##

那些在 [Webucator ][Webucator] 的家伙都非常善良，自愿搞一个视频来总结这个博客帖子。 所以如果视频是你的事，请检查这一点**（这里原文不知道如何翻译）**。

## 总结 ##

`Min-width`媒体查询是非常有用的，当涉及到设计响应式网站的时候，因为它降低了代码的复杂性。通过上面的例子，你可以看到 `Min-width`查询不可能解决每一个问题。 有时添加 `max-width`查询到您的样式表来会使事情变得更加方便。

树林美丽、幽暗而深邃，但我有诺言尚待实现，还要奔行百里方可沉睡。 -- 罗伯特·弗罗斯特

[https_www.cnblogs.com_huansky_p_6095854.html]: https://www.cnblogs.com/huansky/p/6095854.html
[How To Write Mobile-first CSS]: https://zellwk.com/blog/how-to-write-mobile-first-css/
[Image 1]: 
[mw-5.png]: https://zellwk.com/images/2014/12/mw-5.png
[mw-1.png]: https://zellwk.com/images/2014/12/mw-1.png
[mw-2.png]: https://zellwk.com/images/2014/12/mw-2.png
[mw-3.png]: https://zellwk.com/images/2014/12/mw-3.png
[mw-4.png]: https://zellwk.com/images/2014/12/mw-4.png
[Webucator]: https://translate.googleusercontent.com/translate_c?depth=1&rurl=translate.google.com&sl=auto&tl=zh-CN&u=https://www.webucator.com/mobile-training/mobile-web-development.cfm&usg=ALkJrhjb_-9UR2QR2js47dqi5VGNBdSKrg