<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"> <script> //通过window.screen.width获取屏幕的宽度 var offWidth = window.screen.width / 30; //这里用宽度/30表示1rem取得的px document.getElementsByTagName("html")[0].style.fontSize = offWidth + 'px'; //把rem的值复制给顶级标签html的font-size </script> <style> /*偷个懒就直接全局初始化了*/ * { padding: 0; margin: 0; } /* 布局需求,上下都间隔*/ div { margin: 0.833333333rem 0; } /* 去处a标签的下划线*/ a { text-decoration: none; } .one { width: 30rem; /*100/720*30*/ height: 4.166666667rem; /*图片宽750,高100*/ background: url("./img/1.jpg") no-repeat; background-size: contain; } .two { width: 30rem; /*400/720*30*/ height: 16.6666667rem; /*图片宽750,高400*/ background: url("./img/2.jpg") no-repeat; background-size: contain; } .three { width: 30rem; height: 5.875rem; /*图片宽750,高141*/ background: url("./img/3.jpg") no-repeat; background-size: contain; } .four { width: 28.33333333rem; height: 13.16666667rem; /*图片宽750,高316*/ background: url("./img/4.jpg") no-repeat; background-size: contain; margin-left: 0.833333333rem; position: relative; } span { position: absolute; display: block; width: 8.33333333rem; height: 2rem; line-height: 2rem; text-align: center; background: #fff; right: 0.833333333rem; bottom: 0.833333333rem; font-size: 0.95833333rem; color: red; cursor: pointer; } .five { width: 28.33333333rem; height: 13.16666667rem; /*图片宽750,高316*/ background: url("./img/top4.jpg") no-repeat; background-size: contain; margin-left: 0.833333333rem; } </style> </head> <body> <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"> <a href=""><span>25元起</span></a> </div> <div class="five"></div> </body> </html>