响应式开发中CSS媒体查询切分点的合理选择。这篇文章可能看起来有点啰嗦，但它的核心是给出一个合适的MediaQuery命名和写法。本文属于作者Web前端入门与Web响应式开发系列最佳实践中。希望您在阅读本文时能够忘掉您已经了解的CSS和Web开发知识。我们今天所讨论的，并不那么复杂和深奥。如果你觉得准备好了，我们可以从下面这张简单的点图开始：上面点的分布有点随机，有分有合，有近有远。我们的问题是如何将这些点分成五组。最简单的，我们可以在相距较远的两个点之间设置分区，将它们分成不同的组合。上面的圆圈都是我画的。当然你也可以选择其他的划分方式，比如把最右边的两个点分成一组。其实这道题并没有错误答案，但是如果按照下面的方式来划分：它看起来是不是很奇怪？我不会无中生有地问这个问题。当我们需要为不同尺寸的屏幕设置不同的CSS样式稿时，有些人喜欢用最常见的尺寸作为分割点，即320px、768px和1024px。不知道大家有没有听过或者说过下面的话：中屏应该按照768px来划分吗？还是768px也应该划分到中屏的范围？不过这个尺寸是iPad横屏时的尺寸，应该是大屏吧？那么大屏是768px及以上？那么小屏大概是320px？什么是319px？跟蚂蚁有区别吗？本文的主要目的是讨论如何选择合适的划分点和划分组。选择合适的分离点幼儿园会画上面的圆圈，我会详细说明矩形的测量：我们选择了600px、900px、1200px和1800px作为分离点，这些分离组包含了最常见的14种模型：我们结合这些两张图得到更适合你的老板、设计师、开发人员和测试人员的下图：以更直观的方式命名你的组你也可以使用Papa-Bear和Baby-Bear来调用你选择的分割点。但是当你和设计师讨论一个网站在不同的屏幕上会是什么样子的时候，你肯定希望双方能够在脑海中形成一个感性的、直观的认知。如果用平板的竖屏尺寸来形容，那到底是iPad还是Surface？尤其是现在手机越来越大，平板越来越小，你很难用简单的平板或者手机来划分尺寸。但好消息是，Apple不再生产新产品，他们只是不断地从现有产品中移除按钮和耳机插孔。在这里我无法给出任何建议，只能说设计师和产品之间需要多多沟通。声明式设置响应式布局声明式概念在前端非常流行。比如大名鼎鼎的React就是一个典型的声明式组??件库。将声明式编程应用于CSS意味着CSS应该定义它想要什么，而不是它应该如何。我们上面讨论的关于分裂点的一个令人困惑的事情是分裂点也代表一个范围。例如，$large:600px的定义在单词large本身表示范围值时会混淆。因此，在特定的组件或标签中，我们应该隐藏特定的尺寸设置，例如：@mixinfor-phone-only{@media(max-width:599px){@content;}}@mixinfor-tablet-portrait-up{@media(min-width:600px){@content;}}@mixinfor-tablet-portait-only{@media(min-width:600px)and(max-width:899px){@content;}}@mixinfor-tablet-landscape-up{@media(min-width:900px){@content;}}@mixinfor-tablet-landscape-only{@media(min-width:900px)and(max-width:1199px){@内容；}}@mixinfor-desktop-up{@media(min-width:1200px){@content;}}@mixinfor-desktop-only{@media(min-width:1200px)and(max-width:1799px){@content;}}@mixinfor-big-desktop-up{@media(min-width:1800px){@content;}}//usage.my-box{padding:10px;@includefor-desktop-up{padding:20px;}}你会发现我在上面的定义中推荐使用-up和-only后缀，这里使用了具体的样式：.phone-only{@includefor-phone-only{background:purple;}}.tablet-portait-only{@includefor-tablet-portait-only{background:purple;}}.tablet-portrait-up{@includefor-tablet-portrait-up{background:purple;}}.tablet-landscape-只有{@includefor-tablet-landscape-only{background:purple;}}.tablet-landscape-up{@includefor-tablet-landscape-up{background:purple;}}.desktop-only{@includefor-desktop-only{background:purple;}}.desktop-up{@includefor-desktop-up{background:purple;}}.big-desktop-up{@includefor-big-desktop-up{background:purple;}}但是这种方法需要大量的自定义媒体查询匹配是没那么灵活，我们可以提供更细粒度的控制方式：@mixinfor-size($size){@if$size==phone-only{@media(max-width:599px){@content;}}@elseif$size==tablet-portrait-up{@media(min-width:600px){@content;}}@elseif$size==tablet-portrait-only{@media(min-width:600px)and(max-宽度：899px){@content;}}@elseif$size==tablet-landscape-up{@media(min-width:900px){@content;}}@elseif$size==tablet-landscape-only{@媒体（最小宽度：900px）和（最大宽度：1199px）{@content;}}@elseif$size==desktop-up{@media（最小宽度：1200px）{@content;}}@elseif$size==desktop-only{@media(min-width:1200px)and(max-width:1799px){@content;}}@elseif$size==big-desktop-up{@media(min-width:1)800px){@content;}}}//usage.my-box{padding:10px;@includefor-size(desktop-up){padding:20px;}}这个方法自然可以达到想要的效果，但是如果粗心的开发者传入一个未定义的范围名称，就会尴尬很久，所以我们还是建议不要传递特定大小，但传递范围：@mixinfor-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;}}@elseif$range==tablet-portrait-up{@media(min-width:$phone-upper-boundary){@content;}}@elseif$range==tablet-portrait-only{@media(min-width:$手机上边界）和（最大宽度：#{$tablet-portrait-upper-boundary-1}）{@content;}}@elseif$range==tablet-landscape-up{@media（最小宽度:$tablet-landscape-upper-boundary){@content;}}@elseif$range==tablet-landscape-only{@media(min-width:$tablet-portrait-upper-boundary)and(max-width:$tablet-landscape-upper-boundary-1px){@content;}}@elseif$range==desktop-up{@media(min-width:$tablet-landscape-upper-boundary){@content;}}@elseif$range==desktop-only{@media(min-width:$tablet-局域网dscape-upper-boundary)and(max-width:$desktop-upper-boundary-1px){@content;}}@elseif$range==big-desktop-up{@media(min-width:$desktop-upper-boundary){@content;}}}//usage.my-box{padding:10px;@includefor-size(desktop-up){padding:20px;}}
