include-media文档

一、变量(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
$tweakpointsMap of tweakpouints to be merged with $breakpointsMap()
$tweak-media-expressionsMap of tweaked media expressions to be merged with $media-expressionmap()

内容(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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值