适配：在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放
适配的元素：
1.字体
2.宽高
3.间距
4.图像（图标、图片）
适配的方式：
1、百分比适配方式：
根据父级算百分比，需配合其他布局使用
例：
四个div 设置高度后，四份div平分，各占25%
2、viewport缩放适配
把所有机型的css像素设置成一致的
这个方案是以375为标准，对大屏不友好，有弊端
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no, 6 minimum-scale=1,maximum-scale=1" id="view"> 7 <title>Document</title> 8 <style> 9 body { 10 margin: 0; 11 12 } 13 14 .box div { 15 width: 93.75px; 16 height: 100px; 17 float: left; 18 } 19 20 .box div:nth-child(1) { 21 background: red 22 } 23 24 .box div:nth-child(2) { 25 background: blue 26 } 27 28 .box div:nth-child(3) { 29 background: yellowgreen 30 } 31 32 .box div:nth-child(4) { 33 background: pink 34 } 35 </style> 36 <script> 37 (function(){ 38 // 获取css像素值（也就是获取html的宽） （前提是viewport没缩放）三种方法： 39 var curWidth = document.documentElement.clientWidth; 40 var curWidth = window.innerWidth; 41 var curWidth = window.screen.width; 42 43 // 声明一个目标值 44 var targetWidth = 375; //是iphon6的像素值 45 46 //缩放比 47 var scale = curWidth/targetWidth; 48 49 //选择meta标签中的内容 view.content 再改变缩放比 50 var view = document.getElementById('view'); 51 52 view.content = 'initial-scale='+scale+',user-scalable = no, minimum-scale='+scale+',maximum-scale='+scale+'' 53 console.log(view.content) 54 })(); 55 </script> 56 </head> 57 58 <body> 59 <img src="./images/123.jpg" alt=""> 60 <div class="box"> 61 <div></div> 62 <div></div> 63 <div></div> 64 <div></div> 65 </div> 66 </body> 67 68 </html>
3、DPR缩放适配
把css像素缩放成与设备像素一样大的尺寸
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <!-- <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no, 7 minimum-scale=1,maximum-scale=1" id="view"> --> 8 <title>Document</title> 9 <style> 10 body { 11 margin: 0; 12 13 } 14 15 .box div { 16 width: 25%; 17 height: 100px; 18 float: left; 19 } 20 21 .box div:nth-child(1) { 22 background: red 23 } 24 25 .box div:nth-child(2) { 26 background: blue 27 } 28 29 .box div:nth-child(3) { 30 background: yellowgreen 31 } 32 33 .box div:nth-child(4) { 34 background: pink 35 } 36 </style> 37 <script> 38 (function () { 39 // 获取元素 40 var meta = document.querySelector('meta[name="viewport"]'); 41 var scale = 1 / window.devicePixelRatio; // 1/dpr 42 if (!meta) { 43 // 这个条件成立说明用户没写meta标签，需要创建一个 44 meta = document.createElement('meta'); 45 meta.name = 'viewport'; 46 // 此时不需要去掉width=device-width，因为物理像素大于css像素，取宽度会取大的值，initial-scale大， 47 // 所以width=device-width可以不去掉 48 meta.content = 'width=device-width, initial-scale=' + scale + ',user-scalable=no,minimum-scale=' + scale + ',maximum-scale=' + scale + '' 49 document.head.appendChild(meta); 50 } else { 51 meta.setAttribute('content', 'width=device-width, initial-scale=' + scale + ',user-scalable=no,minimum-scale=' + scale + ',maximum-scale=' + scale + '') 52 } 53 })(); 54 </script> 55 </head> 56 <body> 57 <div class="box"> 58 <div></div> 59 <div></div> 60 <div></div> 61 <div></div> 62 </div> 63 </body> 64 </html>
4、rem 适配 （主流）
把所有的设备都分成相同的若干份，再计算元素宽度所占的份数
em:
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no, 7 minimum-scale=1,maximum-scale=1" id="view"> 8 <title>Document</title> 9 <style> 10 .em{ 11 font-size:20px; 12 } 13 .em p{ 14 font-size:2em; /* 1em = 20px */ 15 } 16 </style> 17 </head> 18 <body> 19 <!-- em 作为font-size的单位时，其代表父元素的字体大小，作为其他属性单位时，代表自身字体大小 20 font-size:20px 1em:20px 21 问题： 22 1.Chrome 下有最小字体限制，必须为12px,所以这个值不能小于12 23 2.如果两个一样的元素，但是里面字体不一样，那就不能统一设置了，或者元素字体变化了， 24 就又要统一设置一遍 25 rem css3新增的一个相对单位， 是相对于根元素字体大小； 26 r root 27 html(font-size:20px) 2rem=40px 28 --> 29 <div class="em"> 30 <p>em-放到了房间</p> 31 </div> 32 </body> 33 </html>
rem:
em和rem最终都会转成px
rem适配原理：
把所有设备都分成相同的若干份，再计算元素宽度所占的份数
给所有设备设置根节点字体大小(html)，根节点字体大小是根据屏幕尺寸决定的，通过rem适配，根节点字体大小不能给定值，要根据设备的大小
如何设置html的font-size:
第二种方法：（比较靠谱）
