使用@include-media写媒介查询
2017-03-05 20:24
204 查看
官网地址: @include-media
@include-media的口号是写简单、优雅和可维护的Sass媒介查询。
include-media 是经验的结果,它包含所有过去我希望发现的特点。同时维持一个极简和自然的语法。
关于这个竟然我写过一片文章在CSS-Trick。在那篇文章中我非常详细的解释了我所遇到的问题的解决办法。我还写过一篇博客在David Walsh’s blog详细介绍了include-media.的使用。
这个库从一列默认的断点开始:手机(phone), 平板(tablet)、桌面或者说台式机( desktop)。如果你想修改这些断点或者添加更多的断点,你仅仅只需要用Sass map语法重新声明$breakpoints。
不喜欢用设备名?没问题,因为它们完全是动态的,所以你可以根据命名约定采用自己喜欢的断点名。代码如下:
表达式包含逻辑解析, 如Chris Coyier’s retina declaration, 都能被正确处理, 即使加上其他媒体类型或断点。
最后,把文件 dist/_include-media.scss导入到你的项目。
@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相关文章推荐
- 使用MediaStore.Images和 Cursor查询本地图片和图片缩略图
- 使用MediaStore.Images和 Cursor查询本地图片和图片缩略图
- CSS media queries 媒介查询
- 媒体查询使用方法@media
- 媒体查询使用方法@media
- 媒体查询使用方法@media
- css3媒介查询使用规则小结
- 媒体查询使用方法@media
- 语义化标签和media媒体查询可以放心使用
- 使用MediaStore.Images和 Cursor查询本地图片和图片缩略图
- Android 使用MediaStore.Images和 Cursor查询本地图片和图片缩略图
- 使用索引的误区之二:使用了 和 != 操作符,导致查询不使用索引
- 使用 SendARP 查询 MAC 地址
- 如何在C# 中使用WMI 实现远程查询和共享
- 使用xmlhttp为网站增加域名查询功能
- 在SQL中使用convert函数进行日期的查询的代码
- 使用ADOX方便的查询表和字段
- 使用索引的误区之一:没有使用复合索引的前导列导致查询不使用索引
- 如何在C# 中使用WMI 实现远程查询和共享
- 在SQL中使用convert函数进行日期的查询