<!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>
<!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>