您的位置：首页 > Web前端 > CSS

include-media文档

2017-03-06 01:20 113 查看

一、变量（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...) { ... }


说明

基于一个条件列表生成一个媒介查询

参数

NameDescriptionTypeDefault
$conditions媒介查询条件Arglistnone
内容（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.

参数

NameDescriptionTypeDefault
$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...) { ... }


说明

确定一个条件列表是否被静态断点截获。

参数

NameDescriptionTypeDefault value
$conditions媒介查询条件Arglistnone
返回

Boolean
— 如果条件被静态断点截获返回true。

Requires

[variable] breakpoints

[variable] im-no-media-breakpoint

[variable] media-expressions

[variable] im-no-media-expressions

使用

[mixin] media
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  sass 媒介查询 css3
相关文章推荐
新的分享
章节导航