include-media文档
来源:互联网 发布:wiley数据库使用方法 编辑:程序博客网 时间:2024/06/05 03:13
一、变量(VARIABLES)
1-1、断点(breakpoints)
$breakpoints: ( 'phone': 320px, 'tablet': 768px, 'desktop': 1024px) !default;
说明:
创建一个全局断点列表
示例:
创建一个单独的断点用phone标记
$breakpoints: ('phone': 320px);
Used by
[function] im-intercepts-static-breakpoint
[mixin] media-context
Author
Eduardo Boucas
1-2、媒介表达式(media-expressions)
$media-expressions: ( 'screen': 'screen', 'print': 'print', 'handheld': 'handheld', 'landscape': '(orientation: landscape)', 'portrait': '(orientation: portrait)', 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)', 'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)') !default;
说明:
创建一个静态表达式或媒体类型列表清单。
示例:
创建一个单独媒体类型(screen)
$media-expressions: ('screen': 'screen');
创建一个静态表达式用逻辑分析(或操作)
$media-expressions: ( 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)');
Used by
[function] im-intercepts-static-breakpoint
[mixin] media-context
Author
Eduardo Boucas
1-3、单位间隔(unit-intervals)
$unit-intervals: ( 'px': 1, 'em': 0.01, 'rem': 0.1) !default;
说明:
定义了一个数量从每个单元添加或减去与单独声明断点时的间隔。
示例:
默认间隔像素被定义为1
@include media('>128px') {}/* Generates: */@media (min-width: 129px) {}
默认间隔ems定义为0.01
@include media('>20em') {}/* Generates: */@media (min-width: 20.01em) {}
默认间隔rem被定义为0.1, 使用字体大小:font-size: 62.5%
@include media('>2.0rem') {}/* Generates: */@media (min-width: 2.1rem) {}
Author
Eduardo Boucas
1-4、即使通信媒介支持(im-media-support)
$im-media-support: true !default;
说明
定义支持媒体查询是否可用, 对于不支持媒体查询的浏览器用创建的单独的样式表。
示例
不支持媒介查询
$im-media-support: false;@include media('>=tablet') { .foo { color: tomato; }}/* Generates: */.foo { color: tomato;}
Used by
[mixin] media
Author
Eduardo Boucas
1-5、即时通讯时没有媒介断点(im-no-media-breakpoint)
$im-no-media-breakpoint: 'desktop' !default;
说明
Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or intercept the breakpoint will be displayed, any others will be ignored.
示例
这个媒介查询会被显示,因为它被静态断点截获。
$im-media-support: false;$im-no-media-breakpoint: 'desktop';@include media('>=tablet') { .foo { color: tomato; }}/* Generates: */.foo { color: tomato;}
这个媒介查询不会被显示,因为它不会被静态断点截获。
$im-media-support: false;$im-no-media-breakpoint: 'tablet';@include media('>=desktop') { .foo { color: tomato; }}/* No output */
使用
[function] im-intercepts-static-breakpoint
作者
Eduardo Boucas
1-6、即时通讯时没有媒介表达式(im-no-media-expressions)
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
说明
Selects which media expressions are allowed in an expression for it to be used when media queries are not supported.
示例
这个媒介查询会被显示,因为它截获了静态断点和包含唯一接受媒介表达式
$im-media-support: false;$im-no-media-breakpoint: 'desktop';$im-no-media-expressions: ('screen');@include media('>=tablet', 'screen') { .foo { color: tomato; }} /* Generates: */.foo { color: tomato; }
这个媒介查询不会被显示,因为它截获了静态表达式但是包含的一个媒介表达式是不接受的。
$im-media-support: false;$im-no-media-breakpoint: 'desktop';$im-no-media-expressions: ('screen');@include media('>=tablet', 'retina2x') { .foo { color: tomato; }}/* No output */
使用
[function] im-intercepts-static-breakpoint
作者
Eduardo Boucas
二、MIXINS
2-1、(media)
@mixin media($conditions...) { ... }
说明
基于一个条件列表生成一个媒介查询
参数
内容(Content)
mixin允许额外的内容被传递(通过@content
指令)
示例
用一个值设置断点
@include media('>phone') { }
用两个值设置断点
@include media('>phone', '<=tablet') { }
使用自定义值
@include media('>=358px', '<850px') { }
使用设置断点和自定义值
@include media('>desktop', '<=1350px') { }
使用一个静态表达式
@include media('retina2x') { }
Mixing everything
@include media('>=350px', '<tablet', 'retina3x') { }
需要
[function] im-intercepts-static-breakpoint
[variable] im-media-support
作者
Eduardo Boucas
2-2、( media-context )
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { ... }
说明
This mixin aims at redefining the configuration just for the scope of the call. It is helpful when having a component needing an extended configuration such as custom breakpoints (referred to as tweakpoints) for instance.
参数
$tweakpoints
Map of tweakpouints to be merged with $breakpoints
Map () $tweak-media-expressions
Map of tweaked media expressions to be merged with $media-expression
map ()内容(content)
这个mixin允许额外的内容被传递(通过@content
指令)
示例
用一个tweakpoint扩展全局断点
@include media-context(('custom': 678px)) { .foo { @include media('>phone', '<=custom') { // ... } }}
用自定义的媒介表达式扩展全局媒介表达式
@include media-context($tweak-media-expressions: ('all': 'all')) { .foo { @include media('all', '>phone') { // ... } }}
扩展两个配置映射
@include media-context(('custom': 678px), ('all': 'all')) { .foo { @include media('all', '>phone', '<=custom') { // ... } }}
需要
[variable] breakpoints
[variable] media-expressions
作者
Hugo Giraudel
三、FUNCTIONS
3-1、( im-intercepts-static-breakpoint )
@function im-intercepts-static-breakpoint($conditions...) { ... }
说明
确定一个条件列表是否被静态断点截获。
参数
返回
Boolean
— 如果条件被静态断点截获返回true。
Requires
[variable] breakpoints
[variable] im-no-media-breakpoint
[variable] media-expressions
[variable] im-no-media-expressions
使用
[mixin] media
- include-media文档
- 使用@include-media写媒介查询
- media query 文档阅读笔记
- 安装文件时发生 include incomplete download and damaged media
- SIP和Media帮助文档【译】
- v4l2文档之——media framework
- html文档中media="all"
- 自适应界面学习文档(@media)
- v4l2文档之——media framework
- media
- media
- @media
- Media
- media
- PhoneGap API帮助文档翻译—Media(媒体)
- PhoneGap API帮助文档翻译—Media(媒体)
- PhoneGap API中文帮助文档——Media(媒体)
- 二、v4l2文档之——media framework
- Java多线程-实例解析
- BufferedReader缓冲字符输入流
- C++作业1
- 关于CSS3中多个DIV 盒子垂直叠加及空间堆放z-index计算问题
- CODEFORCES, 34B Sale
- include-media文档
- Android中利用隐式意图发送短信
- SPOJ
- Array-Leetcode
- 《剑指Offer》面试题六之重建二叉树
- No4(Hard) Median of Two Sorted Arrays
- 写点什么
- JSP自定义标签
- 在Autodesk MeshMixer中使用官方的中文语言包