首页 CSS

# rem + less + 媒体查询布局

# rem

# 初识 rem

什么是 rem，rem 的全称为 root em。em 我们都知道，1em 代表一个字符的大小。而 root em 顾名思义，我们可以大致猜测出是以某个源为标准的单位。实际上 rem 代表的是以 <html> 标签里 font-size 属性的单位，举个例子

html {
	设置html文件的默认字体大小为16px
	font-size:16px;
}
此时 1 rem = 16 px;

由此可以看出，html 标签里设置的字体像素值为多少，其每单位 rem 就是多少像素的大小。

# 为什么要 rem

我们都知道当我们缩放浏览器窗口时，网页的内容会因为我们的而改变缩放。如果我们进行开发时，使用的是 rem 则采用 rem 进行设置大小的内容都会进行等比缩放，从而实现自适应效果。但如果我们使用 px 规定了大小，此时我们进行缩放或者使用不同分辨率的设备查看网页内容时，里面的字体的内容并不会进行一个等比缩放而是依然使用规定的像素值。

rem 的出现很好的解决了不同分辨率下查看同一网页字体不会自适应的问题。

相比于 em 仅依靠父元素来设置文字大小，在实际开发中父元素文字大小可能不一致，但是整个页面只有一个 html，使用 rem 可以很好来控制整个页面的元素大小。

# less

# 什么是 less

为解决 css 代码冗余，无法使用变量、函数等概念的问题。引入 less 简化 css 代码的开发。

Less （Leaner Style Sheets 的缩写） 是一门 CSS 扩展语言，也称为 CSS 预处理器。

# 典型场景

当我们需要在不同选择器重复使用同一属性并对其修改时，需要一个一个找到相应属性然后修改十分麻烦，如下情形
div {
    backgroud-color:green;
}
body {
    background-color:green;
}
我们要同时修改背景颜色时，需要一个一个去修改很麻烦。若我们使用less开发，则可以同时修改背景颜色，只需如下
@Color:black;
div {
    backgroud-color:@Color;
}
body {
    background-color:@Color;
}
改变变量Color的值即可同时修改body 和 div 的背景颜色为black
可以将其理解为一个全局变量
# 基础语法
# 定义变量
@varname:value;
注意事项
  • 必须有 @为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感
# 嵌套
直接选中 div 里的子元素 span
div {
    CSS-Code;
    span {
        CSS-Code;
    }
}
编译出的css代码为
div {
    CSS-Code;
}
div span {
    CSS-Code;
}
注意事项
  • 如果遇见（交集 | 伪类 | 伪元素选择器）
  • 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；
  • 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。
如，使用伪类选择器
div {
    CSS-Code
    &:hover {
        CSS-Code
    }
}
编译出来的CSS代码为
div {
    CSS-Code
}
div:hover {
    CSS-Code
}
# 运算
可使用的运算符有 + - * / ，运算符前后左右都要空格
运算优先级为先乘除后加减，从左往右
width:50px - 5; // 最终值为 45px 
若改变运算优先级，则使用()即可，如下
witdth:(50px + 10px) * 2; // 最终值为 120px
注意事项
  • 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
    width: 10rem / 5px; // 最终值为 2rem
  • 如果两个值之间只有一个值有单位，则运算结果就取该单位
# 媒体查询
# 什么是媒体查询
媒体查询（Media Query）是 CSS3 新语法。 使用媒体查询可以令我们针对不同的设备开发不同的 css 样式用以适配，当查看网页的设备不同，就可以根据媒体查询的结果去使用不同的 css 样式以达到最佳的显示效果。
# 媒体查询使用
# 基础范式
检测设备分辨率
@media -mediatype- -and | not | only -(media feature)- {
	CSS-Code
}
根据设备分辨率引入文件
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
# 注意事项
  • 用 @media 开头 注意 @符号
  • mediatype 媒体类型
  • 关键字 and not only
  • media feature 媒体特性 必须有小括号包含
# 属性详解
mediatype 查询类型，将不同的终端设备划分成不同的类型，称为媒体类型，一般使用 screen
image-20211007222508126
关键字
  • and：可以将多个媒体特性连接到一起，相当于 “且” 的意思。
  • not：排除某个媒体类型，相当于 “非” 的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。注意他们要加小括号包含
image-20211007222823943
# 使用实例
当分辨率小于540px的设备查看时.使html字体大小为16px，且body变蓝
@media screen and (max-width:540px) {
	html {
		font-size:16px;
	}
	body {
		background-color:blue;
	}
}
当分辨率 540px < X < 970px 的设备查看时，使html字体大小为25px，且body变黑
@media screen and (min-width:540px) {
	html {
		font-size:25px;
	}
	body {
		background-color:black;
	}
}
当分辨率大于970px的设备查看时，使html字体大小为50px，且body变红
@media screen and (min-width:970px) {
	html {
		font-size:50px;
	}
	body {
		background-color:red;
	}
}
使用媒体查询引入不同css文件，当设备分辨率大于400px时引入styleA.css
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">
# 实例分析
分析媒体查询的里的 css 层叠特性
image-20211007224005323