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.
|
|
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./main.css"> </head> <body> <div id="div0"> <div id="top"> <img id="logo" src="./logo/3.png"> </div> <div id="main"> <ul> <li> <div><img src="./logo/4.png" class="logo"></div> <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div> <div><img src="./logo/2.jpg" class="shopCar"></div> </li> <li> <div><img src="./logo/4.png" class="logo"></div> <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div> <div><img src="./logo/2.jpg" class="shopCar"></div> </li> <li> <div><img src="./logo/4.png" class="logo"></div> <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div> <div><img src="./logo/2.jpg" class="shopCar"></div> </li> <li> <div><img src="./logo/4.png" class="logo"></div> <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div> <div><img src="./logo/2.jpg" class="shopCar"></div> </li> <li> <div><img src="./logo/4.png" class="logo"></div> <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div> <div><img src="./logo/2.jpg" class="shopCar"></div> </li> <li> <div><img src="./logo/4.png" class="logo"></div> <div>慕课精品成长课,培养更高思维+技术能力的综合性高端前端人才</div> <div><img src="./logo/2.jpg" class="shopCar"></div> </li> </ul> </div> <div id="bottom"> <div><img src="./logo/1.png" alt=""></div> <div><img src="./logo/2.jpg" alt=""></div> </div> </div> </body> <script> var c = () => { // 获取当前设备宽度 let w = document.documentElement.clientWidth // 设置字号,默认为字号为20, 以 320 的宽度作为设备依据(可选),如果计算出当前设备的字号大于40,就以40字号显示 let n = (20*(w / 320 ) > 40 ? 40 + "px" : 20*(w / 320 ) + "px") // 当计算好后,赋值给 fontSize document.documentElement.style.fontSize = n } // 设置为初始化的效果 window.addEventListener("load", c) // load 是重新加载计算 // 当屏幕尺寸改变后的效果 window.addEventListener("resize", c) // resize 属性规定是否可由用户调整元素的尺寸大小 </script> </html>
|