如何利用mixin编写media query的代码

mixins允许文档作者定义的属性对时可以在其他规则集中重用的模式。

Media Queries直译就是“媒体查询”。media就是来指定特定的媒体类型，如屏幕（screen)，或者“TV”等，其中“all”表示的是支持所有媒体介质，
and 被称为关键字，与其相似的还有not,only. (max-width:640px) 就是媒体特性，通俗点就是媒体条件。

media query 写入方法：

@media (min-width:640px){

      选择器{

         属性：属性值

}}

那么是如何利用mixin编写media query代码的呢？

1.定义media query 断点

//小屏幕或者手机

@screen-xs:480px;

@screen-xs-min:@screen-xs;

@screen-phone:@screen-xs-min;

//小屏幕或者平板电脑

@screen-sm:768px；

@screen-sm-min:@screen-sm;

@screen-tablet:@screen-sm-min;

//中等屏幕或者桌面

@screeen-md:992px;

@screen-md-min:@screeen-md;

@screen-desktop:@screen-md-min;

//大屏幕或者宽桌面

@screen-lg:1200px;

@screen-lg-min:@screen-lg;

@screen-lg-desktop:@screen-lg-min;

所以说，media query 并不会重叠，在需要时可以提供更多

@screen-xs-max:(@screen-sm-min -1);

@screen-sm-max:(@screen-md -1);

@screen-md-max:(@screen-lg -1);

 

2.在我们所开发的组件中引用：

例如：

@background:#eee;

header{
background:@background;
@media(min-width: @screen-sm){
background:darken(@background, 10%);
 color: #dddddd;
}
}

编译后：

header {
background: #eee;
}
@media (min-width: 768px) {
header {
background: #d5d5d5;
 color: #dddddd;
 }
}

 

转载于:https://www.cnblogs.com/Web-Architecture/p/5993533.html