rem是什么
rem 是一个单位,一个相对的单位,它只相对于 html 里的字体大小也就是:1rem = 16px (16px是html默认的字体大小并且它是可以修改的)。
使用 less 变量 + rem 想要完全适配移动端的各种大小屏幕的不同,就肯定有两个绕不开的东西,一个是媒体查询 ( @media ) 另一个就是 js 了。
使用媒体查询两种方法
第一种 link标签引入:
link标签引入:media属性(eg:宽度414px时候的CSS样式)
<link rel="stylesheet" media="width:414px" href="./demo.css">
第二种 直接在 style 标签里直接书写
style中直接引入:当显示宽度为414px时,.box 该有的样式
<style>
@media (width: 414px) {
.box {
background-color: skyblue;
}
}
</style>
演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-eq