一、媒体查询是使用 @media查询，可以针对不同的媒体类型定义不同的样式。
语法
@media mediatype and|not|only (media feature) {
css样式
}
mediatype 媒体类型(all,print,scree);
关键字 : 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。 and ：可以将多个媒体特性连接到一起，相当于“且”的意思。
not ：排除某个媒体类型，相当于“非”的意思，可以省略。
only : 指定某个特定的媒体类型，可以省略。
media feature 媒体特性必须有小括号包含 (widtn,min-width,max-width)
<style>
/* 1. 媒体查询一般按照从大到小或者 从小到大的顺序来 */
/* 2. 小于540px 页面的背景颜色变为蓝色 */
@media screen and (max-width: 539px) {
body {
background-color: blue;
}
}
/* 3. 540 ~ 970 我们的页面颜色改为 绿色 */
/* @media screen and (min-width: 540px) and (max-width: 969px) {
body {
background-color: green;
}
} */
@media screen and (min-width: 540px) {
body {
background-color: green;
}
}
/* 4. 大于等于970 我们页面的颜色改为 红色 */
@media screen and (min-width: 970px) {
body {
background-color: red;
}
}
/* 5. screen 还有 and 必须带上不能省略的 */
/* 6. 我们的数字后面必须跟单位 970px 这个 px 不能省略的 */
</style>
</head>
<body>
</body>
二、查询+rem，实现屏幕大小改变，界面元素跟着一起改变的原理，实现顺序：
- 媒体查询作用，根据屏幕尺寸的范围，来切换html的font-size （界面元素的参照物跟着屏幕改变）
- 界面元素的大小都以rem为单位（rem代表参照物html的font-size）话不多说，上代码
<style>
* {
margin: 0;
padding: 0;
}
/* html {
font-size: 100px;
} */
/* 从小到大的顺序 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
}
.top {
/* 高度，字体大小，都设置为rem单位，即可根据html的font-size的改变而改变*/
height: 1rem;
font-size: .5rem;
background-color: green;
color: #fff;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">点击</div>
</body>
三、 Less 是一门CSS扩展语言，也成为CSS预处理器。它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
**Less 编译 - vocode Less 插件：
1.到应用商店安装easyless插件
2.在setting.json中添加配置
"less.compile": { "compress": false, "sourceMap": false, "out": "${workspaceRoot}\\css\\", // 这里是代表编译后生成的css文件所放的位置 }
3.保存less文件后，重新打开vscode，编译好的css文件就会在指定文件夹下
image.png
** Less使用
1. Less 使用之变量
@变量名:值;
如：
@color: pink;
/*
+ 必须有@为前缀
+ 不能包含特殊字符
+ 不能以数字开头
+ 大小写敏感 */
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}
- Less 嵌套
/* less中的选择器嵌套写法 */
#header {
.logo {
width: 300px;
}
}
/* 如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接 */
a{
&:hover{
color:red;
}
}
- Less 运算
/*Less 里面写*/
@witdh: 10px + 5;
div {
border: @witdh solid red;
}
/*生成的css*/
div {
border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;
/*
1.乘号（*）和除号（/）的写法
2.运算符中间左右有个空格隔开 1px \ 5
3. 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
4. 如果两个值之间只有一个值有单位，则运算结果就取该单位
*/
网友评论