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;
}
}
												

如何利用mixin编写media query的代码的更多相关文章

  1. 编写一个jsp页面,利用Scriptlet编写一段计算代码,要求用零作为除数,并使用page指令将错误信息显示在另外一个jsp页面,产生的错误信息为“错误,不能用0做除数”

    文章目录 1.测试结果: 2.结果计算页面 3.错误处理页面 1.测试结果: 2.结果计算页面 <%@ page language="java" contentType=&q ...

  2. 利用media query让背景图适应不同分辨率的设备

    随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下 ...

  3. 利用Python编写Windows恶意代码!自娱自乐!勿用于非法用途!

    本文主要展示的是通过使用python和PyInstaller来构建恶意软件的一些poc. 利用Python编写Windows恶意代码!自娱自乐!勿用于非法用途!众所周知的,恶意软件如果影响到了他人的生 ...

  4. 一种让 IE6/7/8 支持 media query 响应式设计的方法

    在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...

  5. media query ie8- 兼容实现总结

    虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适 ...

  6. Effective Python之编写高质量Python代码的59个有效方法

                                                         这个周末断断续续的阅读完了<Effective Python之编写高质量Python代码 ...

  7. iPhone CSS media query(媒体查询)

    iPhone5  iPhone6  iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...

  8. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  9. css3之 media query 使用(转)

    原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决 ...

随机推荐

  1. MySQL exists 和 not exists 的用法

    有一个查询如下: 1 SELECT c.CustomerId, c.CompanyName   2 FROM Customers c   3 WHERE EXISTS(   4     SELECT  ...

  2. 并发编程 - 进程 - 1.互斥锁/2.模拟抢票/3.互斥锁与join区别

    1.互斥锁: 互斥锁:Lock 原理就是把并发变成串行,一个一个运行,不错乱,但效率低 保证多个进程修改一块数据时,大家是一个一个修改,不错乱 mutex.acquire() mutex.releas ...

  3. Python在向CSV文件写中文时乱码的处理办法

    前言 python2最大的坑在于中文编码问题,遇到中文报错首先加u,再各种encode.decode.当list.tuple.dict里面有中文时,打印出来的是Unicode编码,这个是无解的.对中文 ...

  4. shell awk实战

    一.文本处理 1.按行提取关键字频次(如取第5列) awk 'BEGIN{FS="|"} {a[$5]+=1;} END {for(i in a) print i ":& ...

  5. linux页缓存

    2017-04-25 本节就聊聊页缓存这个东西…… 一.概述 页缓存是一个相对独立的概念,其根本目的是为了加速对后端设备的IO效率,比如文件的读写.页缓存顾名思义是以页为单位的,目前我能想到的在两个地 ...

  6. qemu进程页表和EPT的同步问题

    背景分析: 在之前分析EPT violation的时候,没有太注意qemu进程页表和EPT的关系,从虚拟机运行过程分析,虚拟机访存使用自身页表和EPT完成地址转换,没有用到qemu进程页表,所以也就想 ...

  7. SQL Server 排名函数

    个函数进行的解释. 以下是对这4个函数的解释: RANK() 返回结果集的分区内每行的排名.行的排名是相关行之前的排名数加一. 假设两个或多个行与一个排名关联,则每一个关联行将得到同样的排名. 比如, ...

  8. idea 常见问题

    1.idea控制台乱码 打开File->Settings->Editer->File Encoding,将IDE Encoding 和 Project Encoding 都改为UTF ...

  9. 设计模式中类的关系UML

    在java以及其他的面向对象设计模式中,类与类之间主要有6种关系,他们分别是:依赖.关联.聚合.组合.继承.实现.他们的耦合度依次增强. 1. 依赖(Dependence)  依赖关系的定义为:对于两 ...

  10. JS根据userAgent值来判断浏览器的类型及版本【转】

    转自:http://blog.csdn.net/sunlovefly2012/article/details/22384255 JavaScript是前端开发的主要语言,我们可以通过编写JavaScr ...