You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

67 lines
3.1 KiB

2 years ago
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <link rel="stylesheet" href="./main.css">
  8. </head>
  9. <body>
  10. <div id="div0">
  11. <div id="top">
  12. <img id="logo" src="./logo/3.png">
  13. </div>
  14. <div id="main">
  15. <ul>
  16. <li>
  17. <div><img src="./logo/4.png" class="logo"></div>
  18. <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div>
  19. <div><img src="./logo/2.jpg" class="shopCar"></div>
  20. </li>
  21. <li>
  22. <div><img src="./logo/4.png" class="logo"></div>
  23. <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div>
  24. <div><img src="./logo/2.jpg" class="shopCar"></div>
  25. </li>
  26. <li>
  27. <div><img src="./logo/4.png" class="logo"></div>
  28. <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div>
  29. <div><img src="./logo/2.jpg" class="shopCar"></div>
  30. </li>
  31. <li>
  32. <div><img src="./logo/4.png" class="logo"></div>
  33. <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div>
  34. <div><img src="./logo/2.jpg" class="shopCar"></div>
  35. </li>
  36. <li>
  37. <div><img src="./logo/4.png" class="logo"></div>
  38. <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div>
  39. <div><img src="./logo/2.jpg" class="shopCar"></div>
  40. </li>
  41. <li>
  42. <div><img src="./logo/4.png" class="logo"></div>
  43. <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div>
  44. <div><img src="./logo/2.jpg" class="shopCar"></div>
  45. </li>
  46. </ul>
  47. </div>
  48. <div id="bottom">
  49. <div><img src="./logo/1.png" alt=""></div>
  50. <div><img src="./logo/2.jpg" alt=""></div>
  51. </div>
  52. </div>
  53. </body>
  54. <script>
  55. var c = () => {
  56. // 获取当前设备宽度
  57. let w = document.documentElement.clientWidth
  58. // 设置字号,默认为字号为20, 以 320 的宽度作为设备依据(可选),如果计算出当前设备的字号大于40,就以40字号显示
  59. let n = (20*(w / 320 ) > 40 ? 40 + "px" : 20*(w / 320 ) + "px")
  60. // 当计算好后,赋值给 fontSize
  61. document.documentElement.style.fontSize = n
  62. }
  63. // 设置为初始化的效果
  64. window.addEventListener("load", c) // load 是重新加载计算
  65. // 当屏幕尺寸改变后的效果
  66. window.addEventListener("resize", c) // resize 属性规定是否可由用户调整元素的尺寸大小
  67. </script>
  68. </html>