css3媒体查询与less笔记小结

###css3媒体查询
css3媒体查询是响应式方案核心

###媒体类型
all 所有媒体(默认值)
screen 彩色屏幕
print 打印预览

   projection     手持设备
   tv                   电视
   braille           盲文触觉设备
   embossed     盲文打印机
   speech        “听觉”类似的媒体设备
   tty                 不适用像素的设备

###媒体属性
width (可加max min前缀)
height (可加max min前缀)
device-width (可加max min前缀)
device-pixel-ratio(可加max min前缀,需要加webkit前缀)
orientation portrait竖屏
landscape横屏

###操作符,关键字 (only,and,(,or),not)
only:
防止老旧的浏览器 不支持带媒体属性的查询而应用到给定的样式.
@media only screen and (min-width:800px ){
规则;
规则
}
@media screen and (min-width:800px ){
规则;
规则
}
在老款的浏览器下
@media only —> 因为没有only这种设备 规则被忽略
@media screen —> 因为有screen这种设备而且老浏览器会忽略带媒体属性的查询

   			建议在每次抒写media query的时候带上only
   	
   		and:
   			连接媒体属性 、连接媒体类型
   			对于所有的连接选项都要匹配成功才能应用规则
   		
   		or(,) : 和and相似
   			对于所有的连接选项只要匹配成功一个就能应用规则
   		
   		not:取反

###less
less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。

less的中文官网:http://lesscss.cn/
bootstrap中less教程:http://www.bootcss.com/p/lesscss/

###Less编译工具
koala 官网:www.koala-app.com

###less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

###less中的变量
使用@来申明一个变量:@pink:pink;
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名:#@{selector的值}的形式
3.作为URL:@{url}
4.变量的延迟加载

###less中的嵌套规则
1.基本嵌套规则
2.&的使用

###less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数
7.匹配模式
8.arguments变量

###less运算
在less中可以进行加减乘除的运算

###less避免编译

###less继承
性能比混合高
灵活度比混合低

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值