rem-媒体查询-less基础

rem单位
rem(root em)是一个相对单位,类似于em,em是父元素字体大小
rem的是相对于html元素的字体大小
比如,根元素html设置font-size=12px,非根元素设置width:2rem;则width表示24px
2. 媒体查询
2.1 什么是媒体查询
Media Query 是css3新语法
使用@media查询,可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机,Android手机,平板等设备都用得到的多媒体查询
2.2 语法
@media mediatype and|not|only (media feature) {
CSS-Code;
}
用@media开头 注意@符号
mediatype媒体类型
关键字 and not only
media feature 媒体特征 必须有小括号包含
1. mediatype查询类型
值 解释说明
all 用于所有设备
print 用于打印机和打印机预览
scree 用于电脑屏幕,平板电脑,智能手机等
2. 关键字
关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件
and:可以将多个媒体特效连接到一起,相当于"且"的意思
not:排除某个媒体类型,相当于"非"的意思,可以省略
only:指定某个特定的媒体类型,可以省略
3. 媒体特性
值 解释说明
width 定义输出设备中页面可见区域的宽度
min-width 定义输出设备中页面最小可见区域宽度
max-width 定义输出设备中页面最大可见区域宽度
1. 媒体查询一般按照从大到小或者从小到大的顺序来
2. 小于540px 页面的背景颜色变为蓝色
3. 540~970 页面颜色改为绿色
4. 大于等于970 页面颜色改为红色
5. screen 还有 and 必须带上不能省略的
6. 我们的数字后面必须跟单位 970px 这个 px 不能省略
2.4 引入资源
当样式比较繁多的时候,我们可以针对不同的媒体使用不同的stylesheets(样式表)
原理,就是直接在link中判断设备的尺寸,然后引用不同的css文件
1. 语法

3. Less基础
3.1 是一门CSS扩展语言,也成为CSS预处理器
在现有的CSS语法上,为CSS加入程序式语言特性,可以让我们用更少的代码做更多的事
中文网址:http://lesscss.cn/
错误的变量名 @1color @color~@#
变量名区分大小写
可以通过vscode里的easy less把less文件编译成css文件
3.2 嵌套案例
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套子元素的样式直接写到父元素里面
a {
color: red;
}
}
3.3 运算 + - * /
1. 运算符的左右两侧必须敲一个空格隔开
2. 两个数参与运算 如果只有一个数有单位,则最后的结果就以这个单位为准
3. 两个数参与运算,且有不一样的单位,结果以第一个单位为准
5. 把common.less文件引入到index.less里面 语法如下:
在index.less中导入 common.less文件
@import “common”