简洁高效的rem适配方案flexible.js
- 手机淘宝团队出的简洁高效移动端适配库
- 我们再也不需要在写不同屏幕的媒体查询,因为里面js做了处理
- 它的原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。
我们要做的,就是确定好我们当前设备的html文字大小就可以了 - 下载地址：https://github.com/amfe/lib-flexible
[比如]当前设计稿是750px，那么我们只需要把html文字大小设置为75px(750px/ 10)就可以里面页面元素rem值:页面元素的px值/ 75
剩余的,让flexiblejs来去算
实现详情
1.下载flexible.js放到项目目录里去
│ index.html
│
├─css
│ index.css
│ normalize.css
│
├─images
└─js
flexible.js
2.引入flexible.js
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<!-- 引入我们的flexible.js 文件 -->
<script src="js/flexible.js"></script>
<title>Document</title>
</head>
index.css
body {
min- 320px;
max- 750px;
/* flexible 给我们划分了 10 等份,所以应该是10rem */
10rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial, Helvetica;
background: #f2f2f2;
}
3.效果：把窗口切换成不同尺寸html的font-size会自动计算：宽度/10
