LESS介绍+媒体查询
Less介绍
维护CSS的弊端：CSS本质上不是一门语言,是一个简单的样式表.代码维护相对老套,不够灵活。
LESS预处理器: 依然使用CSS语法，引入了变量，混合，运算, 嵌套等功能，大大简化了 CSS 的编写，并且 降低了 CSS 的维护成本
常见的CSS预处理器: Less | SASS 等。
Less语法
变量
@自定义变量名: 值;
例如:
@nav_bgcolor: red;
nav {
color: @nav_bgcolor;
}
☞变量的运算:
@width: 10;
nav {
width: @width * 3px;
}
混合
☞ 定义一个公共的样式(可以式类选择的语法,可以是ID选择器的语法)
例如:
.test() {
width: 50px;
height: 50px;
}
nav {
.test();
}
header {
.test();
}
☞ 可以设置参数
例如:
.test(@width) {
width: @width;
}
nav {
.test(100px);
}
☞ 可以为参数设置默认值
例如:
.test(@width: 100px) {
width: @width;
}
nav {
.test();
}
header {
.test(50px);
}
在浏览器中预览LESS文件(了解)
1. HTML页面直接沟通link标签引用 less文件
<link rel="stylesheet/less" type="text/css" href="less文件.less">
2. HTML页面中引用用来解析less文件的一个js文件
<script type="text/javascript" src="less.js"></script>
备注:
1. 以上执行过程需要在服务器环境下进行
2. webstorm开发工具下,可以执行运行,因为webstorm自带一个服务器环境
渐变
线性渐变
组成：
开始颜色和结束颜色
渐变方向
渐变范围 【百分比表示】
语法：background-image: linear-gradient();
1。 如果在线性渐变中，没有设置 background-size，那么百分比是相对整个父元素的宽度
2。 如果设置了background-size，那么百分比是相对设置的background-size的值；
径向渐变
组成：
开始颜色和结束颜色
渐变范围【通过径向渐变半径】
渐变圆心位置
语法：background-image: radial-gradient();
1. 确定圆心位置可以通过具体的方位名称 at + top | right | left | bottom|....
2. 通过具体值确定圆心位置： 100px at 50px 200px;
3. 如果只设置一个半径值，那么代表水平半径和垂直半径一样【正圆】
4. 如果设置两个值，第一个值代表水平半径，第二值代表垂直半径， 两个值中间使用空格隔开。例如：
100px 50px at center,
文字渐变效果
background-image: linear-gradient(
to right,
red,
blue
);
-webkit-background-clip: text;
color: transparent;
媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
媒体类型
all (所有的设备)
print (打印设备)
screen(电脑屏幕,平板电脑),智能手机
媒体特性
width
height
max-width / max-height
min-width / min-width
orientation: portrait (竖屏模式肖像) | landscape (横屏模式全景)
语法关键字
and 可以将多个媒体特性链接到一块,相当于且
only 指定某个特定的媒体类型, 可以省略
语法
@media only screen and (width: 320px) {
css代码
}
设备划分
超小屏幕 手机 (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面显示器 (≥992px)
大屏幕 大桌面显示器 (≥1200px)
