媒体查询命名 | CSS-Tricks

如果我们将来可以在 CSS 中做到这一点，那将非常酷。我遇到的最佳想法是在 <head> 中的 <meta> 标签中定义它。这样（也许）CSS 可以使用它，JS 也可以使用它。例如 window.matchMedia(nameOfMyMediaQuery) 或 @media (nameOfMyMediaQuery) { }。但由于我们无法做到，Sass 为我们提供了支持。现在问题是，我们如何命名它们？

在 Sass 中，@mixin 看起来像这样

@mixin breakpoint($point) {
  @if $point == papa-bear {
    @media (max-width: 1600px) { @content; }
  }
  @else if $point == mama-bear {
    @media (max-width: 1250px) { @content; }
  }
  @else if $point == baby-bear {
    @media (max-width: 650px)  { @content; }
  }
}

并且您可以像这样使用它

.module {
  width: 25%;
  @include breakpoint(baby-bear) {
    width: 100%;
  }
}

尽管在现实中我更喜欢类似“bp”的东西，因为它更短，并且您需要一直输入它。这就是为什么“+”比“@include”更理想。但我扯远了。或者你可以参考 Brandon Mathis 的风格

$name1:  320px;
$name2:  500px;
$name3:  600px;
$name4:  992px;

@mixin at-least($device-width) {
  @media screen and (min-width: $device-width) {
    @content 
  }
}

@mixin until($device-width) {
  @media screen and (max-width: $device-width - 1) {
    @content 
  }
}

名称应避免使用实际数字。这里的重点是为抽象含义分配一个名称，因此数字可以更改，但名称保持不变。我也会避免使用“iPad”或其他设备名称，因为这只会造成错误的期望，并且很快就会过时。

更好的命名方案是暗示名称之间关系的方案。其中一个显然大于或小于另一个。当然，这是假设宽度查询，这些查询当然是最常见的。但当然，您的媒体查询可能不同或更复杂，并且命名方案应体现这一点。

以下是一些想法

baby-bear
mama-bear
papa-bear

straw-house
stick-house
brick-house

private
corporal
sergeant
captain
major
lieutenant
colonel
general

alpha
beta
gamma
delta
epsilon

very-small
small
medium
large
very-large

–
—
—
—-
——

>-< [---] <----->

seed
seedling
sprout
plant

pebble
stone
rock
boulder

pawn
knight
queen
king

bishop
archbishop
cardinal
pope

eddard
catelyn
robb
sansa
arya
bran
rickon

knife
dagger
scimitar
claidmore

A
B
C
D
E

来自 Vince Speelman

lil-bowow
eminem
jay-z
krs-one
rick-ross

来自 James Nowland

matryoshka-doll
the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-the-one-inside-matryoshka-doll

来自 Philip Brown

michael
jermaine
jackie
marlon
tito

来自 Rob Stinogle

gandalf-the-gray
gandalf-the-white

来自 Darby Brown

stewie
brian
chris
lois
peter
（我省略了 Meg）

还有其他想法吗？

Josh Betz

# 2013年5月9日

我知道他们现在正在推广 SCSS 语法，但我正在使用 Django 和 Coffeescript 的一个项目，在这种情况下，使用 SASS 对我们来说似乎更自然，因为语法与我提到的其他语言更相似。我之所以提到这一点，是因为我还意识到“@include”在 SASS 语法中只是“+”，就像你提到的那样。当我看到这一点时，我就在想为什么我们必须在 SCSS 语法中使用“@include”，而“+”在 SASS 中却可以工作。

Pip

评论永久链接# 2013年5月16日

可能是因为 SCSS 旨在与 CSS 兼容，而 SASS 不兼容？但由于它是一个超集，他们/可以/添加 + 作为替代方案。

Andrew Frank

# 2013年5月9日

我很高兴你写了一篇关于这方面的文章，因为在看到我的 Dribbble 作品获得了多少浏览量后，我打算写一篇。在设计的任何方面和/或开发中，重要的是要消除任何可能具有局限性的先入为主的观念（即标准但越来越不受欢迎的媒体查询，例如 320px、480px、1024px，仅仅因为 iDevices）。

为了进一步说明这个概念，我已经习惯于抛弃像素的概念，因为它们具有固定的含义。在为网络创建内容的所有方面，我们都应该考虑比例和比率，而不是任何具体的东西；为网络创建内容的过程应该始终保持纯粹。我曾经在某个地方看到过关于使用 mixin 将 px 转换为 em 的对话，但在我看来，这仍然像个老古董。无论您是否转换单位，您仍然陷入了绝对和完美的思维模式。不过我还年轻，所以也许只有我这样想！

顺便说一句，感谢你的转发。我是 shoptalk 和 css-tricks 的忠实粉丝！

Pat

# 2013年5月9日

charmander
charmeleon
charizard

D Tang

# 2013年5月9日

nokia
palm
sonyericsson
iphone
droid
note

Guilherme

# 2013年5月9日

这让我想起了这篇关于计算机命名的精彩文章。（不要介意设计，它显然是由系统管理员完成的。）

示例：北欧诸神、布偶、口袋妖怪：P

Nicklas

评论永久链接# 2013年5月10日

什么设计？:) 里面没有 CSS！
AWKM

评论永久链接# 2013年5月13日

我个人支持那个设计。只需 5 个请求……在一秒钟内加载；)

# 2013年5月9日

我从我桌子上的一样东西那里得到了灵感……

short
tall
grande
venti

我的 hidpi 叫做 espresso

它就这样被使用了几个月。

Dustin

评论永久链接# 2013年5月9日

正要这么说。我使用 short、tall、grande、venti——我甚至不喜欢咖啡！不过曾在星巴克工作过一段时间，而且有一个兄弟还在那里工作。
Brian Holt

评论永久链接# 2013年5月10日

我也这样做，只是我使用 tall 作为最小值，trenta 作为最大值。

Kenyon

# 2013年5月9日

picard 
riker 
data 
la-forge 
worf

Eric

# 2013年5月9日

Hobbit 
Dwarf 
Man 
Wizard 
Elf 
Valar

Derryl

# 2013年5月9日

我将我的命名为步骤 1、步骤 2、步骤 3 等。

根据项目，我可能只有两个步骤，也可能有六个步骤。

我在 LESS 中将它们定义为变量……

@step3:         ~"only screen and (min-width: 30em) and (max-width: 48em)";
@step3_or_less: ~"only screen and (max-width: 48em)";

……并像这样使用它们

.module {
    @media @step5 { … }
    @media @step3, @step4 { … }
    @media @step2_or_less { … }
}

我更喜欢“step”而不是“breakpoint”，因为我通常指的是宽度范围，而不是特定值。

我以前使用过 @phone 和 @desktop 之类的简写，但它们并不完全准确——而且将它们称为“步骤 X”似乎消除了我和同事交谈时的困惑。

我想这让我变得很无趣 :-P

Josh Nichols

# 2013年5月9日

我刚刚就如何命名媒体查询进行了长时间的讨论。我们认为咖啡尺寸最合适

Short、Tall、Grande、Venti、Trenta、Depth Charge。

如果您事后需要中间尺寸，您可以添加“with room”或“no whip” 它完美无缺！

Stu Robson

# 2013年5月9日

我一直觉得命名断点是一件非常冗长的事情，当 320/444/732 是使用 Sass 完成事情的更快速方法时。我多少理解使用它们的原因。但与更改 $brand-color 不同，我认为永远不会有时间将站点的媒体查询增加几个 EM 或像素。

为此，我编写了自己的 Sass mixin，允许使用 $variable 断点，并且能够传递一个（以 px 为单位）的值，该值转换为 EM。

它在 CodePen 上，这里——http://codepen.io/sturobson/pen/keuyp

John

# 2013年5月9日

很棒的列表！在编码中加入一些乐趣是很好的。

这是我的

Initiate
Padawan
Knight
Master

别评判我！

kikito

# 2013年5月10日

从手持设备到大型台式机屏幕

gollum
bilbo
gimly
aragorn
gandalf
balrog

除此之外，eye-of-sauron 应该与视网膜设备匹配。

Alex Kempton

# 2013年5月10日

我使用 bear 方法，发现它简洁直观。我已经扩展了它到：

baby-bear
toddler-bea
brother-bear
mama-bear
auntie-bear
uncle-bear
papa-bear

我也在使用一个略微不同的 mixin，它有一些可选参数，比如设置“max”/“min”，“width”/“height”。

@mixin breakpoint($point, $range:'min', $axis:'width') {

    @if $axis == 'width' {

        @if $point == 'baby-bear' {
            @media (#{$range}-width: 350px) {
                @content;
            }
        }

        @if $point == 'mama-bear' {
            @media (#{$range}-width: 767px) {
                @content;
            }
        }

        @if $point == 'papa-bear' {
            @media (#{$range}-width: 1200px) {
                @content;
            }
        }

    } @else if $axis == 'height' {

        @if $point == 'baby-bear' {
            @media (#{$range}-height: 350px) {
                @content;
            }
        }

        @if $point == 'brother-bear' {
            @media (#{$range}-height: 550px) {
                @content;
            }
        }

        @if $point == 'papa-bear' {
            @media (#{$range}-height: 880px) {
                @content;
            }
        }

    }
}

Sam Hasler

# 2013年5月10日

csswizardry-grids 使用 palm、lap、portable 代表 palm+lap，lap-and-up 代表大于 palm 的所有尺寸，desk 和 desk-wide。

──palm─┤ ├──lap──┤ ├─desk────────────
─portable────────┤        ├─desk-wide
         ├──lap-and-up───────────────

Scott

永久链接到评论# 2013年5月14日

我也使用这种方法。它避免了使用“mobile”或“cellphone”或“tablet”等过于具体的设备名称，但仍然与网站的显示方式相关。我喜欢在代码中加入一点幽默，但不断地在 CSS 中输入“papa bear”或“darth vader”之类的东西实在太繁琐了。

Alex Hardy

# 2013年5月10日

这是一个有点极客的方式，变形金刚尺寸类：)

minicon
scout
deluxe
voyager
ultra
leader
supreme

Conor Haining

# 2013年5月10日

Kitten
Cat
Leapard
Panther
Tiger
Lion

lukeocom

永久链接到评论# 2013年6月12日

老虎比狮子大……
Ricardo Zea

永久链接到评论# 2013年6月12日

而且豹子在大多数情况下都比黑豹大。

Karl Merkli

# 2013年5月10日

我过去使用过

start-mobile
start-tablet
start-desktop

但现在

sparrow
pigeon
raven
buzzard
eagle

DJ Mosca

# 2013年5月10日

这对我有用……。

$device_widths: (100px, 200px, 300px, 400px, 500px, 600px, 700px, 800px, 900px, 1000px, 1100px, 1200px, 1300px, 1400px);

@mixin device-width($i){
    @media only screen and (max-width: (nth($device_widths, $i))){
        @content;
    }
}

所有需要调用的都是

@include device-width(10){
      styles...
}

Aaron Silber

# 2013年5月10日

当然！我们需要绝地等级；

Initiate
Padawan
Knight
Master
议员
大师

或西斯等级；

小弟
刺客
高手
信徒
战士
掠夺者
领主
黑暗领主

Matt Bivins

永久链接到评论# 2013年5月10日

我与你想法一致，Aaron……现在正在做一个项目，使用以下方法对我来说非常有帮助

ewok
wookiee
wampa

我快用完毛茸茸的种族了……所以希望在我完成之前不需要更多断点！
Norman144

永久链接到评论# 2013年5月15日

难道只有大师才能坐在议会里吗？

Kevin Powell

# 2013年5月10日

如果 Luke Wroblewski 也参与进来，他的命名方式会是

wrist
palm
lap
desk
wall

@TrentWalton 手腕、手掌、膝盖、桌面、墙壁、购物中心大小的屏幕。人体工程学不会改变。设备会改变。

— Luke Wroblewski (@LukeW) 2012年11月27日

Charlie

# 2013年5月10日

Homer
Marge
Bart
Lisa
Maggie
<=IE8 Grandpa Simpson

Danny

# 2013年5月10日

有一段时间我用行星大小（在我使用 320 及以上风格之前）

木星 (min-width 1440px)
土星 (max-width 1439px)
天王星 (max 1280)
海王星 (max 1024)
地球 (max 800)
金星 (max 650)
火星 (max 568)
水星 (max 400)

而且我总是在 else if 系列的末尾包含一个自定义条目，如果不在该列表中，则直接在 mediaquery 中打印值作为 max-width（同样，在我使用 320 之前）。

@else { @media(max-width: $point) { @content; } }

现在，我发现自己对各个模块使用奇数的 media query 越来越多，因此我让上述语句几乎成为了整个断点 mixin

@mixin bp($point) { @media screen and (min-width: $point/16 + em) { @content; } }

Devon

# 2013年5月10日

我很惊讶还没有人使用啤酒

琥珀色
金色
棕色
奶油色
深色

Josh

# 2013年5月10日

显而易见……

小鲨鱼 ♪ do do, do do do do ♪
妈妈鲨鱼 ♪ do do, do do do do ♪
爸爸鲨鱼 ♪ do do, do do do do ♪
游泳者 ♪ do do, do do do do ♪

James Nowland

# 2013年5月10日

当我不用玩我的套娃并试图保持专业时，我使用这个系统

媒体查询

从小到大排序。
超小、小、中、大、更大、巨大、超大。

如果你需要添加更多断点，我目前建议使用以下数字增量

  massive-01
  massive
  huge-02
  huge-01
  huge
  larger
  large-01
  large
  medium
  small
  extra-small

在大型网站上，我发现有时你需要在最初设置的媒体查询之间找到一个位置，因此数字增量通常是一个好的解决方案。


@mixin breakpoint($point) {
  @if $point == massive {
    @media (min-width: 120em) { @content; }
  }
 
  @else if $point == huge {
    @media (min-width: 100em) { @content; }
  }
 
  @else if $point == larger {
    @media (min-width: 75em)  { @content; }
  }
 
  @else if $point == large {
    @media (min-width: 60em)  { @content; }
  }
 
  @else if $point == medium {
    @media (min-width: 54em)  { @content; }
  }
 
  @else if $point == small {
    @media (min-width: 30em)  { @content; }
  }
 
  @else if $point == extra-small {
    @media (min-width: 20em)  { @content; }
  } 
}

更多信息，这里有一个此 mixin 部分的 gist 链接。

Brad Metcalf

# 2013年5月11日

我的列表

Chuck Norris

Brad Metcalf

# 2013年5月11日

糟糕，搞错了。我的列表

一切
Chuck Norris

wigster

# 2013年5月11日

pre[rel="PHP"]{
    @include box-shadow(3px 3px 1px 2px rgba($php, 0.3));
        &:before{
            background: $php;
        }
}
pre[rel="jQuery"]{
    @include box-shadow(3px 3px 1px 2px rgba($jQuery, 0.3));
        &:before{
            background: $jQuery;
        }
}
pre[rel="css"]{
    @include box-shadow(3px 3px 1px 2px rgba($css, 0.3));
        &:before{
            background: $css;
        }
}
pre[rel="sass"]{
    @include box-shadow(3px 3px 1px 2px rgba($sass, 0.3));
        &:before{
            background: $sass;
        }
}

Ferdy

# 2013年5月13日

我个人使用帖子中找到的尺寸方案，然后类似于服装尺寸进行缩写

XXS
XS
S
M
L
XL
XXL

尽管其他建议听起来很有趣，但我认为它们不太清晰。另一个好处是以后很容易插入额外的断点。

Paul

永久链接到评论# 2013年6月28日

不错！+1

chris

# 2013年5月13日

我在一些页面中使用了尺寸主题。这真的很有帮助。
我想还有很多其他选择。但当你拥有商店时，这是一个聪明的方法 :)

caseybaggz

# 2013年5月13日

树
树枝
叶子

Josh

# 2013年5月14日

啤酒:: 最差的啤酒 = 最小的 && 最好的啤酒 = 最大的

-Natural Ice
–PBR
—Blue Moon (当然是指生啤)
—-Miller Lite

Sara D

# 2013年5月15日

婴儿
妈妈
爸爸

Jason Bratham

# 2013年5月17日

/--------\
|  o  o  |
|  {oo}  |
\  ^^^^  /
   ----

长胡子猪人

Alexander Goncharov

# 2013年5月19日

请原谅我=)

3э
3=э
3==э
3====Э

Santosh

# 2013年5月20日

我刚接触 scss，但我非常喜欢这些技巧……非常灵活。

Santosh

# 2013年5月20日

我刚接触 scss，但我非常喜欢这些技巧……非常灵活。
命名

宇宙
星系
太阳系
地球
亚洲
:)

Santosh

# 2013年5月20日

嘿，chris，
媒体查询重复，这让我感到困惑。我是否错过了什么。

@mixin breakpoints($points) {
    @if $points == papabear {
        @media only screen and (max-width:1600px) {
            @content;
        }
    } @else if $points == mamabear {
        @media only screen and (max-width:1200px ) {
            @content;
        }
    } @else {
        @media only screen and (max-width:768px) {
            @content;
        }
    }
}

.wrapper {
    width:960px;
    margin: 0 auto;

    @include breakpoints(babybear){
        width:100%;
    }
}


.span1 {
    width:200px;
    @include breakpoints(mamabear){
        width:150px;
    }
    @include breakpoints(babybear){
        width:100%;
    }
}

输出

.wrapper { width: 960px; margin: 0 auto; }
@media only screen and (max-width: 768px) { .wrapper { width: 100%; } }

.span1 { width: 200px; }
@media only screen and (max-width: 1200px) { .span1 { width: 150px; } }
@media only screen and (max-width: 768px) { .span1 { width: 100%; } }

你可以看到有两个媒体查询具有相同的断点（768px），但我想让这些类在同一个媒体查询中写入，而无需重复。这怎么可能？

Melanie Archer

# 2013年5月23日

按马的品种

设得兰矮种马
阿拉伯马
彩绘马
纯血马
克莱兹代尔马
夏尔马

Chris Ruppel

# 2013年5月28日

有一个名为 Breakpoint 的稳定、功能齐全的 Compass 扩展，它可以执行本文中讨论的所有操作。我发现有点奇怪，这个线程中几乎每个评论者都希望命名断点，但随后将自己限制在三个或四个断点（无论使用什么“非设备”名称）。

当我使用 Breakpoint 扩展时，我的典型项目最终会有 20-40 个不同的媒体查询。为什么？因为它们都针对我的内容，而不是与设备匹配的一些任意线（或笨拙地在“流行”分辨率之间划线）。

最终结果是在任何分辨率下都具有真正流畅的布局，而不是在几个断点处看起来不错但在这些特殊数字之间看起来有点奇怪的布局。一些例子

nav-sm、nav-md、nav-lg
footer-md、footer-lg、footer-wide
login-md、login-lg
main-cta-sm、main-cta-wide

是的，你最终可能会得到三个或四个具有相同值的标签。这没关系。因为一旦你必须更改其中一个，你就无需更改其他标签。最终你会减少很多查找和替换操作。

我有没有说过它可以自动将你的 PX 值转换为 EM？这非常巧妙。

此外，我不能不提一下它的无查询回退功能，它依赖于条件<html>类来提供纯 CSS，无需任何额外努力即可实现兼容旧版 IE 的布局。

尝试使用Breakpoint，阅读文档，并改变你使用媒体查询的方式！

Ragnar Þór Valgeirsson

# 2013年5月31日

怎么样

robin
batman
superman

Crispen Smith

# 2013年6月1日

我仍在对此进行测试，但我发现从断点混合器中移除逻辑似乎可以生成更简洁的代码。我的实现如下所示

@mixin wb($point) {
@media(min-width: $point) { @content; }
}

@mixin hb($point) {
@media(min-height: $point) { @content; }
}

在定义需要媒体查询的元素时，我总是从小到大工作，因此这似乎非常顺畅，并且只需要一组命名良好的变量。我使用了 Pawn -> King。这提供了各种各样的递增比例顺序，而不会绑定到设备，这意味着你可以以与你最初建议非常相似的方式调用混合器

.foo {
@include wb($pawn) {
color: #FFF; }
}

这为我们提供了

@media (min-width: 320px) {
.foo {
color: #FFF; } }

（显然，这个例子完全没有用，不应该被视为一个好主意，但它确实演示了基本概念）

Ricardo Zea

# 2013年6月2日

我的很简单

fucking-small
small
medium
large
fucking-large

Ricardo Zea

评论永久链接# 2013年7月2日

对于我们这些说西班牙语的人，我现在决定这样命名我的媒体查询

la-chilindrina（fucking-small）
el-chavo（small）
kiko（medium）
señor-barriga（large）
profesor-girafales（fucking-large）
don-ramon（retina）

哦，天哪，哈哈。

Aaron Weber

# 2013年6月11日

jordan
pippen
rodman

Brandtley McMinn

# 2013年10月6日

感谢你的提示@chriscoyier。在我的上一个 RWD 项目之后，我稍微简化了你的示例，因为断点范围的数量变得有点过分了。

// _config.scss
...

$baby-bear:      0;
$mama-bear:      600px;
$papa-bear:      1000px;

$window-buffer:  15px;    // accounts for window/scrollbar quirk in Chrome 
                          // [http://www.sitepoint.com/rwd-scrollbars-is-chrome-better/]

@mixin bp($break-point) {
  @media (min-width: ($break-point + $window-buffer)) { @content; }
}

@mixin bp-2x($break-point, $resolution: 2) {
  @media (min-width: ($break-point + $window-buffer)) and (min-resolution: #{$resolution}dppx)  { @content }
}


// main.scss
...

.container {
  width: 100%; 

  // @mqfix for strange content break on headings at ~850px
  @include bp($mama-bear + 350) {
    width: ($col * 8);
  }
}

当然，任何人都可以根据需要补充em/rem值，但这让我能够最大限度地灵活地处理任意内容断裂，同时减少我必须在整个样式表中回忆的变量数量。

此外，像我在示例中使用// @mqfix ...那样记录特定的断点，使得在 ST2 中非常容易找到它，并回忆起我使用该特定断点的确切原因。

Akhtar

# 2013年11月26日

iPhone
iPad
Desktop

或以上示例已经不错
baby-bear
mama-bear
papa-bear

Ömür Yanıkoğlu

# 2014年1月6日

谢谢！这个方法非常有用且有趣..

.. 而且我喜欢国际象棋版本 :)

pawn
knight
queen
king

Eduardo Grillo

# 2014年3月19日

好主意！这样一来，一切都变得更有乐趣了。 :)
我想添加一些音乐

violin
viol
cello
bass

Bhushan

# 2014年4月16日

很棒的主意，伙计…

Matt

# 2014年5月12日

谢谢！我需要这个。

此评论线程已关闭。如果您需要分享重要信息，请联系我们。