使用@include-media写媒介查询

Posted 2022-12-03 Dragon_GL

官网地址： @include-media

@include-media的口号是写简单、优雅和可维护的Sass媒介查询。

include-media是什么？

include-media 是一个Sass库，使用它 我们可以用一种容易和优雅的方式，自然和非常简单的语法编写CSS媒介查询。

---

为什么我们需要这个库？

我花了很长一段时间尝试不同的可用的库和mixin, 但是，最终它们都不能以优雅的方式满足我的需要。其中的有些是不能够设置断点和特定的值, 有些是不能很好的处理CSS或操作符, 还有它们中大部分语法复杂和不自然。

include-media 是经验的结果，它包含所有过去我希望发现的特点。同时维持一个极简和自然的语法。

关于这个竟然我写过一片文章在CSS-Trick。在那篇文章中我非常详细的解释了我所遇到的问题的解决办法。我还写过一篇博客在David Walsh’s blog详细介绍了include-media.的使用。

---

特点

灵活的声明断点（breakpoints）

这个库从一列默认的断点开始：手机（phone）, 平板（tablet）、桌面或者说台式机（ desktop）。如果你想修改这些断点或者添加更多的断点，你仅仅只需要用Sass map语法重新声明$breakpoints。

$breakpoints: (phone: 320px, tablet: 768px, desktop: 1024px);

/* Inclusive and exclusive operators for a finer control over the intervals */
@include media(">phone", "<=tablet") 
    width: 50%;


/* Use ligatured operators if you fancy a slicker declaration */
@include media("≥phone", "≤tablet") 
    line-height: 1.5;

不喜欢用设备名？没问题，因为它们完全是动态的，所以你可以根据命名约定采用自己喜欢的断点名。代码如下：

 $breakpoints: (small: 320px, medium: 768px, large: 1024px);

/* Inclusive and exclusive operators for a finer control over the intervals */
@include media(">medium", "<=large") 
    width: 100%;

---

邻近备用设备断点（On-the-fly breakpoints）

一些元素在中间断点需要额外的规则， 所以你可以使用全局断点和特定的值（带上单位）创建媒体查询。

@include media(">desktop", "<=1150px") 
    font-size: 4.0rem;

---

敏捷支持媒介类型（media-type）

媒体类型和静态表达式是可选和自动延迟的。媒体类型列表可以通过声明$media-expressions修改。

表达式包含逻辑解析, 如Chris Coyier’s retina declaration, 都能被正确处理, 即使加上其他媒体类型或断点。

@include media("retina2x", ">desktop") 
    width: 100%;

---

支持不同的单位（Units）

生活中不仅仅只有像素，想用em或rem这些单位吗？这些单位include-media都支持。

$breakpoints: (phone: 20em, tablet: 48em, desktop: 64em);

@include media(">tablet", "<=52em") 
    background-color: #bad;

---

表达式别名

您可以创建表达式别名：如果你发现某些表达式被重复使用了, 不管它们是多么复杂(注意变量名旁边的三个点 用mixin调用)。

$my-weird-bp: ">=tablet", "<815px", "landscape", "retina3x";

@include media($my-weird-bp...) 
    display: inline-block;

---

基于高度的媒介查询（Height-based media queries）

所有表达式结果都默是min-width, 但是你可以显示的用min-height替代来使用任何断点。

$breakpoints: (small: 320px, medium: 768px, large: 1024px);

@include media("height>small", "height<=medium") 
    height: 50%;

---

特殊上下文断点和表达式（Context-specific breakpoints and expressions）

如果一个组件有一个断点或媒体表达设置, 但是这个设置不与其他应用程序共享, 那么您可以把它们设置成只存在组件范围内。

@include media-context(('custom': 678px)) 
    .my-component 
        @include media(">phone", "<=custom") 
            border-radius: 100%;
        
    

---

下载

include-media 只是一个SCSS文件，导入到您的项目后就可以开始使用了。你可以手动下载，也可以通过npm安装npm install include-media，或者通过Yarn安装yarn add include-media。

最后，把文件 dist/_include-media.scss导入到你的项目。

---

文档

文档是由SassDoc生成的，从这里可以获得:include-media documention

---