07. 如何实现移动端rem适配
如何实现移动端rem适配
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />//需要这句适配的话 <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 7.5rem; height: 7.5rem; background: red; } </style> </head> <body> <div id="box"></div> </body> <script type="text/javascript"> //获取屏幕宽度 var width = document.documentElement.clientWidth; //获取html var htmlNode = document.querySelector('html'); //设置html字体大小 htmlNode.style.fontSize = width/7.5 + 'px'; </script> </html>
10.背景图片距离
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #box{ width: 100px; height: 200px; background: pink; padding: 100px; border: 80px solid blue; background-image: url("img/1.png"); background-repeat: no-repeat; background-origin: content-box; background-position: -50px 0; } /*答案:130px*/ </style> </head> <body> <div id="box"></div> </body> </html>