百分比适配方式

这种方法，只是宽度能适配，高度不能适配，只能设置某个高度固定死

需求：是四个div高度为100px，宽度等宽横向排列

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device-width,user-scalable=no"><style type="text/css">body {margin: 0;}div {width: 25%;height: 100px;float: left;}.box1 {background: red;}.box2 {background: blue;}.box3 {background: green;}.box4 {background: yellow;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div>
</body>
</html>

动态生成viewport适配方式

这种方式其实是动态设置缩放比例，动态创建meta标签，并且将计算出来的缩放比例放到这个标签的content属性里面

如果目标尺寸设置320,那么整个屏幕宽度就是320px，设置为750那么整个屏幕就是750px，这样我们页面中的每个元素就可以根据设计图来设置宽高了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">(function(){var w = window.screen.width;var targetW = 320;var scale = w/targetW; //当前尺寸/目标尺寸var meta = document.createElement("meta");meta.name = "viewport";meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""console.log(scale);document.head.appendChild(meta);})();</script><!--<meta name="viewport" content="user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">--><style type="text/css">body {margin: 0;}div {width: 80px;height: 100px;float: left;}.box1 {background: red;}.box2 {background: blue;}.box3 {background: green;}.box4 {background: yellow;}</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

rem适配方式

rem适配方式第一步首先需要设置视口的约束（固定的）

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

先来看一下在rem适配之前是怎么样的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Title</title>
</head>
<style>*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;background-color: red;}
</style>
<body><div class="box"></div>
</body>
</html>

分析运行结果，当屏幕的宽度是320的时候，这个box的宽度比例是200/320，当换一个手机屏幕大小不一样的，比如375的那么box的宽度比例是200/375

那么在不同手机中相同的一个box盒子占整个屏幕的宽度比例就不一样了，所以呈现的效果也是不一样的

那么对于这个问题可以使用rem来做适配，rem适配最主要的就是html根元素字体大小设置屏幕区域的宽度，这样整个屏幕就变成了1rem为基准，然后在设置每个元素的时候试用rem来做单位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><title>Title</title>
</head>
<style>*{margin: 0;padding: 0;}.box{width:2rem;height: 0.5rem;background-color: red;}
</style>
<script>(function () {// 获取屏幕区域的宽度var w = document.documentElement.clientWidth// 获取html根元素var htmlNode = document.querySelector('html')// 设置字体大小htmlNode.style.fontSize = w + 'px'})()
</script>
<body><div class="box"></div>
</body>
</html>

这样当我们屏幕宽度是320的时候，1rem就等于320 ，2rem就等于2*320，当屏幕宽度是375的时候1rem就等于375，也就是说1rem会随着屏幕的宽度来变化适应