官网地址: @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