如何利用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;
}
}
如何利用mixin编写media query的代码的更多相关文章
- 编写一个jsp页面,利用Scriptlet编写一段计算代码,要求用零作为除数,并使用page指令将错误信息显示在另外一个jsp页面,产生的错误信息为“错误,不能用0做除数”
文章目录 1.测试结果: 2.结果计算页面 3.错误处理页面 1.测试结果: 2.结果计算页面 <%@ page language="java" contentType=&q ...
- 利用media query让背景图适应不同分辨率的设备
随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下 ...
- 利用Python编写Windows恶意代码!自娱自乐!勿用于非法用途!
本文主要展示的是通过使用python和PyInstaller来构建恶意软件的一些poc. 利用Python编写Windows恶意代码!自娱自乐!勿用于非法用途!众所周知的,恶意软件如果影响到了他人的生 ...
- 一种让 IE6/7/8 支持 media query 响应式设计的方法
在不同的浏览器宽度下使用不同的 CSS 声明,常见的方案是使用 media query,但这个方案不支持 IE9 以下浏览器. 国外比较流行的 UI 框架 bootstrap v3 版本中使用 med ...
- media query ie8- 兼容实现总结
虽然说响应式设计的理想状态是,需对pc/移动各种终端进行响应:但是现实是高分辨率的pc端与手机终端屏幕相差太大,像电商这样有大量图片和文字信息的同时排版要求精准的页面,设计一个同时适应高分辨率pc又适 ...
- Effective Python之编写高质量Python代码的59个有效方法
这个周末断断续续的阅读完了<Effective Python之编写高质量Python代码 ...
- iPhone CSS media query(媒体查询)
iPhone5 iPhone6 iPhone6Plus iPad设备 media query(媒体查询)代码. iPhone < 5: @media screen and (device-a ...
- [转]CSS3 Media Query实现响应布局
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...
- css3之 media query 使用(转)
原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决 ...
随机推荐
- MySQL exists 和 not exists 的用法
有一个查询如下: 1 SELECT c.CustomerId, c.CompanyName 2 FROM Customers c 3 WHERE EXISTS( 4 SELECT ...
- 并发编程 - 进程 - 1.互斥锁/2.模拟抢票/3.互斥锁与join区别
1.互斥锁: 互斥锁:Lock 原理就是把并发变成串行,一个一个运行,不错乱,但效率低 保证多个进程修改一块数据时,大家是一个一个修改,不错乱 mutex.acquire() mutex.releas ...
- Python在向CSV文件写中文时乱码的处理办法
前言 python2最大的坑在于中文编码问题,遇到中文报错首先加u,再各种encode.decode.当list.tuple.dict里面有中文时,打印出来的是Unicode编码,这个是无解的.对中文 ...
- shell awk实战
一.文本处理 1.按行提取关键字频次(如取第5列) awk 'BEGIN{FS="|"} {a[$5]+=1;} END {for(i in a) print i ":& ...
- linux页缓存
2017-04-25 本节就聊聊页缓存这个东西…… 一.概述 页缓存是一个相对独立的概念,其根本目的是为了加速对后端设备的IO效率,比如文件的读写.页缓存顾名思义是以页为单位的,目前我能想到的在两个地 ...
- qemu进程页表和EPT的同步问题
背景分析: 在之前分析EPT violation的时候,没有太注意qemu进程页表和EPT的关系,从虚拟机运行过程分析,虚拟机访存使用自身页表和EPT完成地址转换,没有用到qemu进程页表,所以也就想 ...
- SQL Server 排名函数
个函数进行的解释. 以下是对这4个函数的解释: RANK() 返回结果集的分区内每行的排名.行的排名是相关行之前的排名数加一. 假设两个或多个行与一个排名关联,则每一个关联行将得到同样的排名. 比如, ...
- idea 常见问题
1.idea控制台乱码 打开File->Settings->Editer->File Encoding,将IDE Encoding 和 Project Encoding 都改为UTF ...
- 设计模式中类的关系UML
在java以及其他的面向对象设计模式中,类与类之间主要有6种关系,他们分别是:依赖.关联.聚合.组合.继承.实现.他们的耦合度依次增强. 1. 依赖(Dependence) 依赖关系的定义为:对于两 ...
- JS根据userAgent值来判断浏览器的类型及版本【转】
转自:http://blog.csdn.net/sunlovefly2012/article/details/22384255 JavaScript是前端开发的主要语言,我们可以通过编写JavaScr ...