rem簡單實現移動端適配

時間 2019-11-29

標籤 rem 簡單實現移動適配欄目無線简体版

原文原文鏈接

rem：移動web開發

默認字體大小是16pxhtml
在<html>中設置字體大小git
與em的區別：github
- em是在父級設置字體大小受影響
移動端適配web
- 首先獲取屏幕的寬度移動web開發
- 計算當前屏幕寬度和640的比例字體
- 計算出font-size的值code
- 改變html的font-size的值htm

<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <title>rem</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 6.4rem;
            height: 6.4rem;
            background-color: pink;
            font-size: .14rem;
            margin: 0 auto;
        }
        p {
            width: 50%;
            height: 50%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>
        <p>這是一個p</p>
    </div>
</body>
</html>

第一種：開發

window.onresize = function(){
    var html = document.getElementsByTagName('html')[0];
    var width = html.offsetWidth;
    console.log(width);
    html.style.fontSize = (width>=640?640:width)/640*100 + 'px';
};

第二種：rem

var html = document.getElementsByTagName('html')[0];
     if(html){
         var w = window.innerWidth;
         var fontSize = (w>640?640:w)/640 * 100;
         html.style.fontSize = fontSize + 'px';
     }
     window.onload = function(){
         window.onresize = function(){
             var w = window.innerWidth;
             console.log(w);
             var fontSize = (w>640?640:w)/640 * 100;
             html.style.fontSize = fontSize + 'px';
         }
     }

https://github.com/PaddyWang/summarize

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。