小橋 流水 人家 ...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} ul{ width:100%; height:1rem; background: red; } li{ width:1rem; height:1rem; font-size:0.2rem; color:blue; float:left; } </style> </head> <body> <ul> <li>小橋</li> <li>流水</li> <li>人家</li> </ul> </body> <script type="text/javascript"> // 移動端適配 function rems(){ // 獲取屏幕寬度(此處是一個相容的寫法) var htmlWidth=document.documentElement.clientWidth||document.body.clientWidth; // 設置根元素的fontSize的大小，此處的3.2是--設計圖的寬度/100 document.documentElement.style.fontSize=htmlWidth/3.2+"px"; // 設置條件屏幕寬度最大值 if(htmlWidth>640){ htmlWidth=640; document.documentElement.style.fontSize=htmlWidth/3.2+"px"; } } // 預設調用適配函數 rems(); // window大小變化時調用適配函數 window.onresize=function(){ rems() } </script> </html>
