值 | 说明 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等 |
and | 可以将多个媒体特性连接到一起,相当于 且 的意思 |
---|---|
not | 排除某个媒体类型,相当于 非 的意思,可省略 |
only | 指定某个特定的媒体类型,可省略 |
每种媒体类型都有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格,暂且了解三个,注意他们要加小括号包含
值 | 说明 |
---|---|
width | 定义输出设备中页面可见区域的宽度 |
min-width | 定义输出设备中页面最小可见区域宽度 |
max-width | 定义输出设备中页面最大可见区域宽度 |
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
Less变量、Less编译、Less嵌套、Less运算
Less 编译:
本质上,Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则 最终会通过解析器,编译生成对应的CSS文件
所以,只需要把我们的less文件 编译生成为css文件 就可以了
Vscode Less 插件🔴: Easy LESS
变量是指没有固定的值,可以改变的,因为CSS中的颜色和数值等 经常使用
@变量名:值;
@color: pink;
Less 嵌套写法:
.box {
&.content {
width: 10px;
}
}
@width: 5px + 5;
border: @witdh solid pink; /*生成: 10px solid pink;*/
width: (@width + 5) * 2; /* 生成的值是15 */
@import 'style'; /* 在less文件中导入less文件
rem 实际开发适配方案:
元素大小取值方法: