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

學無先后，達者為師

網站首頁 編程語言 正文

移動端rem適配（rem怎么適配不同的手機）

作者：庚中 更新時間： 2022-03-14 編程語言

開始前:一定要記住,在iphone5下,1rem=16px;

圖示:
在這里插入圖片描述

下面開始三個步驟:

1.獲取html的寬

操作代碼:

let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些瀏覽器documentElement獲取不到,那就使用后面的body

在這里插入圖片描述

2.獲取htmlDom元素

let htmlDom=document.getElementByTagName('html')[0]

在這里插入圖片描述

3.設置html樣式

htmlDom.style.fontSize=htmlwith/20+'px';

完整代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .test{
        width: 20rem;
        height: 10rem;
        background-color: skyblue;
        text-align: center;
    }
    .hello{
        color: red;
        font-size: 1rem;

    }
</style>
<body>
    <div class="test">
        <div class="hello">hello JSPang</div>
    </div>
</body>
</html>
<script>
    // 三個步驟:
    // 1.獲取html的寬,
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些瀏覽器documentElement獲取不到,那就使用后面的body
    console.log(htmlwidth);
    
    // 2.htmlDom
    let htmlDom=document.getElementsByTagName("html")[0]
    console.log(htmlDom);

    //3.設置根元素樣式
    htmlDom.style.fontSize=htmlwidth/20+'px';//記住這個20是等份的意思,這樣每一份是16px,即1rem=16px;
    
</script>

效果:點擊不同的設備后刷新,都可以適配.
在這里插入圖片描述

上面再進行優(yōu)化:添加監(jiān)聽事件,讓它自動監(jiān)聽窗口變化動態(tài)改變.
完整代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .test{
        width: 20rem;
        height: 10rem;
        background-color: skyblue;
        text-align: center;
    }
    .hello{
        color: red;
        font-size: 1rem;

    }
</style>
<body>
    <div class="test">
        <div class="hello">hello JSPang</div>
    </div>
</body>
</html>
<script>
function gethtmlfontsize(){
    // 三個步驟:
    // 1.獲取html的寬,
    let htmlwidth=document.documentElement.clientWidth || document.body.clientWidth;//有些瀏覽器documentElement獲取不到,那就使用后面的body
    console.log(htmlwidth);
    
    // 2.htmlDom
    let htmlDom=document.getElementsByTagName("html")[0]
    console.log(htmlDom);

    //3.設置根元素樣式
    htmlDom.style.fontSize=htmlwidth/20+'px';
}
// 調用一次
gethtmlfontsize();
// 添加監(jiān)聽事件(resize是監(jiān)聽的意思)
window.addEventListener('resize',gethtmlfontsize)
</script>

效果:
在這里插入圖片描述
上面是參考iphone5的320寬的寫法,iphone678代碼如下:

<script>
 /**
    * ================================================
    *   設置根元素font-size
    * 當設備寬度為375(iPhone6)時，根元素font-size=16px; 
    × ================================================
    */
(function (doc, win) {
  var docEl = win.document.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  
  var refreshRem = function () {
    var clientWidth = win.innerWidth
                      || doc.documentElement.clientWidth
                      || doc.body.clientWidth;

    console.log(clientWidth)
    if (!clientWidth) return;
    var fz;
    var width = clientWidth;
    fz = 16 * width / 375;
    docEl.style.fontSize = fz + 'px';//這樣每一份也是16px,即1rem=16px
  };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, refreshRem, false);
  doc.addEventListener('DOMContentLoaded', refreshRem, false);
  refreshRem();

})(document, window);
</script>

補充:禁止客戶雙指縮放辦法
在這里插入圖片描述

最后附上一個更完美的解決方案(用別人寫好的hotcss.js文件,你就可以直接寫px像素,它會自動幫你轉成rem):
我的收藏的hotcss.js文件地址
hotcss.js文件拷貝到viewport.js里,然后在webpack.config.js里面引入即可.
在這里插入圖片描述

原文鏈接：https://blog.csdn.net/xiaodi520520/article/details/90056865

欄目分類
最近更新