浅谈rem布局

rem + less + 媒体查询布局

rem

初识rem

什么是rem，rem的全称为root em。em我们都知道，1em代表一个字符的大小。而root em顾名思义，我们可以大致猜测出是以某个源为标准的单位。实际上rem代表的是以标签里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