rem布局
流式布局的缺点：
- 文字大小无法随着屏幕大小变化而变化
- 高度无法设置
- 无法在屏幕变化时让屏幕高度和宽度等比缩放
一. rem布局基础
rem是什么？
rem即root em，前面我们学习CSS的时候知道，em是父元素字体大小
rem是相对于html元素的字体大小
例如：
html{
/*设置根元素为12px*/
font-size:12px;
}
div {
/*2rem即为24px*/
font-size:2rem;
}
二. 媒体查询
什么是媒体查询？
媒体查询是CSS3新语法：
@media mediatype and|not|only (media feature) {
CSS-Code;
}
| media type | 连接词 | media feature |
|---|---|---|
| all 所有设备/print 打印机 /screen屏幕 | and 连接多个媒体特性/not排除某个媒体类型/only连接某天个特定媒体类型 | width定义可见区域宽度/min-width定义输出设备最小可见区域/max_width最大可见区域 |
实例：根据页面宽度改变背景颜色
@media screen and (max-width: 800px) {
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
实例解释：当页面宽度在800到500之间背景色为pink，当页面宽度在500以下，背景色为purple
三. 媒体查询+rem实现动态变化
实现思路：
- 针对每个宽度区域设置不同的rem大小
- 使用媒体查询在不同宽度内引入不同文件设置不同rem
- 在写CSS文件时，使用rem作为单位
这样我们就可以使用rem+媒体查询来动态改变盒子大小了
使用媒体查询引入资源
语法规范：<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
实例：
<style>
/* 当我们屏幕大于等于 640px以上的，我们让div 一行显示2个 */
/* 当我们屏幕小于640 我们让div一行显示一个 */
/* 一个建议： 我们媒体查询最好的方法是从小到大 */
/* 引入资源就是 针对于不同的屏幕尺寸 调用不同的css文件 */
</style>
<link rel="stylesheet" href="style320.css" media="screen and (min-width: 320px)">
<link rel="stylesheet" href="style640.css" media="screen and (min-width: 640px)">
四. rem适配方案
rem适配方案有两种：
- 媒体查询+rem
- flexible.js+rem（推荐）
前面已经基本讲过第一种适配方案了，这里重点看第二种适配方案
flexible.js是什么？
是手机淘宝团队编写的移动端适配库，无需编写太多媒体查询
该库代码和原理非常简单，即 将rem永远设置为视窗宽度的1/10
var rem = document.documentElement.clientWidth / 10
项目代码初始化
<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<script src=“js/flexible.js”> </script>
/* 如果我们的屏幕超过了 750px 那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
html {
font-size: 75px!important;
}
}
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
五. VScode插件cssrem
作用：自动将px转换为rem，免除繁琐的计算
安装cssrem之后可以设置rem单位基准值，后面在写CSS时，直接写测量出来的px单位就可以直接转为rem单位
