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)