huanggr
不同的手机，视口的宽度也是不一样的，这样对我们布局就产生了一些困扰，我们可以通过百分比的方式对其进行处理，然是有没有更好的方式呢，当然是有的，我们可以通过rem来动态的对屏幕进行适配：
对rem的理解
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style type="text/css"> body { margin:0; } .box { } .box div { width:4rem; height:4rem; float: left; box-sizing:border-box; border:1px solid red; } </style> </head> <script type="text/javascript"> (function(){ var html=document.documentElement; var hWidth = html.getBoundingClientRect().width; html.style.fontSize = hWidth/16 + "px"; })() // 假如屏幕总宽度为320px 那么16相当于每一份的宽度为20px // 若宽度设置为16rem，那么就会撑满一整行 </script> <body> <!-- rem / em --> <div class="box"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> |
rem以父级的字体大小作为对照，我们使用除法将其分成若干等分，每一份的大小就是字体的大小，也就是当html中的字体大小为20px的时候（可以打开调试窗口，点击到html上看到字体的大小），1rem就等于20px，为了方便计算的时候进行转换（也就是进行计算），我们可以通过less进行处理
通过less编译css，同时做下除法，算出是多少rem
rem.less中的文件，less解析推荐使用 vs code 里面的 easy less,个人觉得特别好用
1 2 3 4 5 6 7 8 9 10 11 12 | @r:16rem; .box div { width:4rem; height:4rem; float: left; box-sizing:border-box; border:1/@r solid red; } body { padding:10/@r; } |
包裹的元素在一行上面进行显示
这个时候我们，如果我们还需要，几个内容区域并排显示，需要怎么做呢，我们可以这样
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> #box { height: 200px ; border:1px solid red; display: flex; } #box div { width:80px; height:80px; background: red; margin: auto; //全部自适应 } </style> </head> <body> <div id="box"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> <script type="text/javascript"> </script> |
7