日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

移動端自適應布局（viewport+rem）

作者：看山就是山，看海就是海，山海 更新時間： 2022-01-18 編程語言 
<!DOCTYPE html>
<html>
? <head>
? ? <meta charset="utf-8">
? ? <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
? ? <title>test</title>
? </head>
? <script>
? ?window.onload = function () {
? ? ? getRem(750, 100) //設計圖紙的屏幕的寬度，rem的計算值
? ? };
? ? window.onresize = function () {//設計圖紙的屏幕的寬度，rem的計算值
? ? ? getRem(750, 100)
? ? };
? ? function getRem(pwidth, prem) {
? ? ? var html = document.getElementsByTagName("html")[0];//獲取整體頁面的html標簽
? ? ? var oWidth = document.body.clientWidth || document.documentElement.clientWidth;//獲取當前屏幕寬度
? ? ? html.style.fontSize = oWidth / pwidth * prem + "px"; //按照計算1rem等于這里得整合
? ? }
? </script>
? <body>
? ? <div id="app-box">
?? ??? ?<div class="daad">111111</div>
?? ?</div>
? </body>
? <style>
? .daad{
? ?width:1rem; /*根據設計圖測量的數值除以上面定的比如100就得到了rem */
? ?font-size:0.2rem;
? ?background:red;
? }
? </style>
</html>

原文鏈接：https://blog.csdn.net/u012834688/article/details/122358300

欄目分類
最近更新