断点css_做CSS断点的100％正确方法

断点css

by David Gilbertson

大卫·吉尔伯森(David Gilbertson)

做CSS断点的100％正确方法 (The 100% correct way to do CSS breakpoints)

For the next minute or so, I want you to forget about CSS. Forget about web development. Forget about digital user interfaces.

在接下来的一分钟左右，我希望您忘记CSS。 忘了网站开发。 忘记数字用户界面。

And as you forget these things, I want you to allow your mind to wander. To wander back in time. Back to your youth. Back to your first day of school.

当您忘记这些事情时，我希望您允许您的思想漂移。 时光倒流。 回到你的青春。 回到您上学的第一天。

It was a simpler time, when all you had to worry about was drawing shapes and keeping your incontinence in check.

这是一个更简单的时间，您只需要担心绘制形状并控制尿失禁即可。

Take a look at the dots above. Notice how some of them are clumped together, and some of them spread out? What I want you to do is break them up into five groups for me, however you see fit.

看看上面的点。 请注意其中的一些如何聚集在一起，而其中的一些分散开来？ 我想让您为我分成五个小组，但您认为合适。

Go ahead. After checking that no one is watching, draw a circle around each of the five groups with your child-like finger.

前进。 在确认没有人在看后，用像孩子一样的手指在五个组中的每一个上画一个圆圈。

You probably came up with something like the below, right? (And whatever you do, don’t tell me you scrolled down without doing the exercise. I will face palm.)

您可能想出了类似下面的内容，对吧？ (无论您做什么，都不要告诉我您不做练习就向下滚动。我将面对手掌。)

Sure, those two dots on the right could have gone either way. If you grouped them together it’s OK, I guess. They say there’s no wrong answer, but I’ve never been wrong, so I’ve never been on the receiving end of that particular platitude.

当然，右边的两个圆点可能会消失。 我想，如果将它们分组在一起就可以了。 他们说没有错误的答案，但是我从来没有错，所以我从来没有在那种特定的陈词滥调上接受过。

Before I go on, did you draw something like the below?

在我继续之前，您是否绘制了如下图所示的内容？

Probably not. Right?

可能不是。 对？

But that’s basically what you’d be doing if you set your breakpoints at positions matching the exact width of popular devices (320px, 768px, 1024px).

但是，如果将断点设置在与流行设备的确切宽度(320像素，768像素，1024像素)完全匹配的位置，那基本上就是您要做的事情。

Have words of the below nature ever entered your ears or exited your mouth?

以下性质的话是否曾经进入您的耳朵或从您的嘴巴出来？

“Is the medium breakpoint up to 768px, or including 768? I see… and that’s iPad landscape, or is that ‘large’? Oh, large is 768px and up. I see. And small is 320px? What is this range from 0 to 319px? A breakpoint for ants?”

“中等断点是否高达 768像素或包括768像素？ 我知道了……那是iPad的前景，还是那“大”？ 哦，最大为768像素及以上。 我懂了。 小是320px？ 从0到319px的范围是多少？ 蚂蚁的断点？”

I could proceed to show you the correct breakpoints and leave it at that. But I find it very curious that the above method (“silly grouping”) is so widespread.

我可以继续向您展示正确的断点，然后将其留在那。 但是，我很奇怪上述方法(“愚蠢的分组”)如此广泛。

Why should that be?

为什么会这样呢？

I think the answer to this problem, like so many problems, comes down to misaligned terminology. After all, waterboarding at Guantanamo Bay sounds super rad if you don’t know what either of those things are. (Oh I wish that was my joke.)

我认为，与许多问题一样，该问题的答案归结为术语不一致。 毕竟，如果您不知道其中的任何一个， 关塔那摩湾的滑水听起来就算超级。 (哦， 我希望那是我的笑话。)

I think we mix up “boundaries” and “ranges” in our discussions and implementations of breakpoints.

我认为我们在讨论和实现断点时会混淆“边界”和“范围”。

Tell me, if you do breakpoints in Sass, do you have a variable called $large that is, say, 768px?

告诉我，如果您在Sass中执行断点操作，您是否有一个名为$large的变量，例如768px？

Is that the lower boundary of the range you refer to as large, or the upper boundary? If it’s the lower, then you must have no $small because that should be 0, right?

您所指的范围的下限是较大还是上限？ 如果它较低，那么您必须没有$small因为那应该是0 ，对吧？

And if it’s the upper boundary then how would you define a breakpoint $large-and-up? That must be a media query with a min-width of $medium, right?

如果它是上限，那么如何定义断点$large-and-up呢？ 那必须是min-width为$medium的媒体查询，对吗？

And if you are referring to just a boundary when you say large, then we’re in for confusion later on because a media query is always a range.

而且，如果您说的是大而仅指边界，那么稍后我们会感到困惑，因为媒体查询始终是range 。

This situation is a mess and we’re wasting time thinking about it. So I have three suggestions:

这种情况一团糟，我们正在浪费时间考虑。 所以我有三个建议：

1. Get your breakpoints right

   让你的破发点的权利

2. Name your ranges sensibly

   合理命名您的范围

3. Be declarative
   声明性的

提示1：正确设置断点 (Tip 1: Get your breakpoints right)

So what are the right breakpoints?

那么正确的断点是什么？

Your kindergarten self already drew the circles. I’ll just turn them into rectangles for you.

你幼儿园的自我已经引起了人们的注意。 我为您将它们变成矩形。

600px, 900px, 1200px, and 1800px if you plan on giving the giant-monitor people something special. On a side note, if you’re ordering a giant monitor online, make sure you specify it’s for a computer. You don’t want to get a giant lizard in the mail.

600像素，900像素，1200像素和1800像素(如果您打算给巨型显示器用户一些特殊的东西)。 附带说明一下，如果您要在线订购大型显示器，请确保指定用于计算机。 您不想在邮件中收到巨大的蜥蜴 。

Those dots your channeled young self has been playing with actually represent the 14 most common screen sizes:

您引导的年轻自我所玩过的那些点实际上代表了14种最常见的屏幕尺寸：

So we can make a pretty little picture that allows for the easy flow of words between the folks dressed up as business people, designers, developers, and testers.

因此，我们可以制作一张很小的图片，以便在装扮成商人，设计师，开发人员和测试人员的人们之间轻松交流。

提示2：明智地命名您的范围 (Tip 2: Name your ranges sensibly)

Sure, you could name your breakpoints papa-bear and baby-bear if you like. But if I’m going to sit down with a designer and discuss how the site should look on different devices, I want it to be over as quickly as possible. If naming a size portrait tablet facilitates that, then I’m sold. Heck, I’d even forgive you for calling it “iPad portrait.”

当然，您可以根据需要命名断点为papa-bear和baby-bear 。 但是，如果我要与设计师坐下来讨论该网站在不同设备上的外观，我希望它尽快结束。 如果命名一个大小的肖像平板电脑方便，那么我就被卖了。 哎呀，我什至原谅你称它为“ iPad portrait”。

“But the landscape is changing!” you may shout. “Phones are getting bigger, tablets are getting smaller!”

“但是风景正在改变！” 你可能会大喊。 “手机越来越大，平板电脑越来越小！”

But your website’s CSS has a shelf life of about three years (unless it’s Gmail). The iPad has been with us for twice that time, and it has yet to be dethroned. And we know that Apple no longer makes new products, they just remove things from existing ones (buttons, holes, etc).

但是您网站CSS的保质期约为三年(除非是Gmail)。 iPad曾两次与我们在一起，但至今仍未取消。 而且我们知道Apple不再生产新产品，它们只是删除现有产品中的东西(按钮，Kong等)。

So 1024 x 768 is here to stay, folks. Let’s not bury our heads in the sand. (Fun fact: ostriches don’t live in cities because there is no sand, and thus nowhere to hide from predators.)

伙计们，所以1024 x 768仍在这里。 我们不要把头埋在沙子里。 (有趣的事实：鸵鸟不住在城市里，因为那里没有沙子，因此没有地方可以躲避捕食者。)

Conclusion: communication is important. Don’t purposefully detach yourself from helpful vocabulary.

结论：沟通很重要。 不要故意使自己脱离有用的词汇。

提示3：声明式 (Tip 3: Be declarative)

I know, I know, that word “declarative” again. I’ll put it another way: your CSS should define what it wants to happen, not how it should happen. The “how” belongs hidden away in some sort of mixin.

我知道，这个词又是“声明性的”。 我会换一种说法：你CSS应该定义它要发生的，它不应该是如何发生的。 “如何”在某种混合中被隐藏了。

As discussed earlier, part of the confusion around breakpoints is that variables that define a boundary of a range are used as the name of the range. $large: 600px simply makes no sense if large is a range. It’s the same as saying var coordinates = 4;.

如前所述，围绕断点的部分困惑是，将定义范围边界的变量用作范围的名称 。 $large: 600px如果范围large则$large: 600px毫无意义。 这与说var coordinates = 4; 。

So we can hide those details inside a mixin rather than expose them to be used in the code. Or we can do one better and not use variables at all.

因此，我们可以将这些细节隐藏在mixin中，而不是将其公开以用于代码中。 或者，我们可以做得更好，而不使用任何变量。

At first I did the below snippet as a simplified example. But really I think it covers all the bases. To see it in action, check out this pen. I’m using Sass because I can’t imagine building a site without it. The logic applies to CSS or Less just the same.

首先，我以下面的代码段作为简化示例。 但实际上我认为它涵盖了所有基础。 要查看实际效果， 请检出此笔 。 我使用Sass是因为我无法想象没有它就可以建立一个网站。 该逻辑适用于CSS或Less相同。

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-desktop-up {
    padding: 20px;
  }
}

Note that I’m forcing the developer to specify the -up or -only suffix.

请注意，我强迫开发人员指定-up或-only后缀。

Ambiguity breeds confusion.

歧义导致混乱。

An obvious criticism might be that this doesn’t handle custom media queries. Well good news, everybody. If you want a custom media query, write a custom media query. (In practice, if I needed more complexity than the above I’d cut my losses and run into the loving embrace of Susy’s toolkit.)

一个明显的批评可能是这不能处理自定义媒体查询。 好消息，大家。 如果要自定义媒体查询，请编写自定义媒体查询。 (在实践中，如果我需要的复杂性超过了上面所述，我会减少损失并陷入Susy工具包的热烈拥护之中。)

Another criticism might be that I’ve got eight mixins here. Surely a single mixin would be the sane thing to do, then just pass in the required size, like so:

另一个批评可能是我在这里有八个mixin。 当然，只有一个mixin是明智的，然后只需传递所需的大小即可，如下所示：

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Sure, that works. But you won’t get compile-time errors if you pass in an unsupported name. And to pass in a sass variable means exposing 8 variables just to pass to a switch in a mixin.

当然可以。 但是，如果传入不支持的名称，则不会出现编译时错误。 传递sass变量意味着仅暴露8个变量以传递到mixin中的开关。

Not to mention the syntax @include for-desktop-up {...} is totes more pretty than @include for-size(desktop-up) {...}.

更不用说@include for-desktop-up {...}的语法比@include for-size(desktop-up) {...}的语法更漂亮。

A criticism of both these code snippets might be that I’m typing out 900px twice, and also 899px. Surely I should just use variables and subtract 1 when needed.

对这两个代码段的批评可能是我两次键入了900px，也键入了899px。 当然，我应该只使用变量，并在需要时减去1。

If you want to do that, go bananas, but there are two reasons I wouldn’t:

如果您想这样做，那就去吃香蕉吧，但是有两个原因我不愿意：

1. These are not things that change frequently. These are also not numbers that are used anywhere else in the code base. No problems are caused by the fact that they aren’t variables — unless you want to expose your Sass breakpoints to a script that injects a JS object with those variables into your page.

   这些不是经常更改的事情。 这些也不是代码库中其他任何地方使用的数字。 它们不是变量，这不会造成任何问题-除非您希望将Sass断点公开给脚本，该脚本会将带有这些变量的JS对象注入您的页面。

2. The syntax is nasty when you want to turn numbers into strings with Sass. Below is the price you pay for believing that repeating a number twice is the worst of all evils:

   当您想使用Sass将数字转换为字符串时，语法令人讨厌 。 以下是您付出的代价，认为重复两次是所有邪恶中最严重的事情：

@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-portrait-upper-boundary) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

Oh and since I’ve taken on a ranty tone over the last few paragraphs … I pity the fool who does something magical like store breakpoints in a Sass list and loop over them to output media queries, or something similarly ridiculous that future developers will struggle to decipher.

哦，既然我在最后几段中都采取了保守的态度……我可怜那个傻瓜，他做了一些神奇的事情，例如将断点存储在Sass列表中并循环到它们以输出媒体查询，或者类似的荒谬之举，以至于未来的开发人员将苦苦挣扎解密。

Complexity is where the bugs hide.

错误是隐藏的地方。

Finally, you may be thinking “shouldn’t I be basing my breakpoints on content, not devices?”. Well I’m amazed you made it this far and the answer is yes … for sites with a single layout. Or if you have multiple layouts and are happy to have a different set of breakpoints for each layout. Oh and also if your site design doesn’t change often, or you’re happy to update your breakpoints when your designs update since you’ll want to keep them based on the content, right?

最后，您可能会想：“我不应该将断点基于内容，而不是设备吗？”。 好吧，我很惊讶您能做到这一点，答案是肯定的……对于具有单一布局的网站。 或者，如果您有多个布局，并且很乐意为每个布局设置一组不同的断点。 哦，如果您的站点设计不经常更改，或者您很高兴在设计更新时更新断点，因为您希望根据内容保持断点，对吗？

For complex sites, life is much easier if you pick a handful of breakpoints to use across the site.

对于复杂的站点，如果选择几个断点以在整个站点中使用，则生活会容易得多。

We’re done! But this post has not been as furry as I would like, let me see if I can think of an excuse to include some…

大功告成！ 但是这篇文章并不像我想要的那样毛茸茸，让我看看我是否能想到一个借口包括一些…

Oh, I know!

哦，我知道！

断点开发的额外技巧 (Bonus tips for breakpoint development)

1. If you need to experience CSS breakpoints for screen sizes bigger than the monitor you’re sitting at, use the ‘responsive’ mode in Chrome DevTools and type in whatever giant size you like.
   如果您需要遇到CSS断点的屏幕尺寸大于所坐显示器的尺寸，请在Chrome DevTools中使用“响应”模式，然后输入所需的任何大尺寸。
2. The blue bar shows ‘max-width’ media queries, the orange bar is ‘min-width’ media queries, and the green bar shows media queries with both a min and a max.
   蓝色栏显示“最大宽度”媒体查询，橙色栏显示“最小宽度”媒体查询，绿色栏显示同时带有最小和最大的媒体查询。
3. Clicking a media query sets the screen to that width. If you click on a green media query more than once, it toggles between the max and min widths.
   单击媒体查询将屏幕设置为该宽度。 如果您多次单击绿色媒体查询，则会在最大宽度和最小宽度之间切换。
4. Right click a media query in the media queries bar to go to the definition of that rule in the CSS.
   右键单击媒体查询栏中的媒体查询，以转到CSS中该规则的定义。

Hey, thanks for reading! Comment with your tops ideas, I’d love the hear them. And click the little heart if you think I deserve it, or leave it hollow and empty, like my sense of self-worth will be if you don’t.

嘿，谢谢阅读！ 评论您的最佳想法，我希望听到他们的想法。 如果您认为我应得的话，请单击小小的心，或者让它空虚而空荡，就像我的自我价值感一样。

翻译自: https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/

断点css