移動端頁面尺寸適配

本文轉載自查看原文 2020-05-08 14:59 692 css

以iphone6設計圖為基准

做法一:

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2rem; // 通過測量的尺寸除以100得到rem值
        height: 2rem;
        background: red;
    }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'; // 這個7.5是設計稿的寬度除以100得到的(如果以iphone5設計圖為基准，7.5 => 6.4)
    </script>
</body>
</html>

做法二:

<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="" />
    <style>
    body{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 2.66666667rem; // 通過測量的尺寸除以動態設置的html字體大小得到rem值(需要頻繁使用計算器計算，影響開發效率)
        height: 2.66666667rem;
        background: red;
    }
    </style>
</head>
<body>
 
    <div class="box"></div>
 
    <script>
  // 通過設備像素比算出縮放比率
    var scale = 1 / window.devicePixelRatio;
 // 動態修改視口縮放比率   document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
 
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; // 10是定死的一個值，這是和網易有很大的區別(不過網易沒有動態修改視口縮放比率)
    </script>
</body>
</html>

兩者頁面元素尺寸都以rem為單位，但是文字字體大小不要使用rem換算，
而是使用媒體查詢來進行動態設置，比如下面的代碼就是網易的代碼：

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}
 
@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:17px
    }
}
 
@media screen and (min-width: 400px) {
    body {
        font-size:19px
    }
}

或者：

@media screen and (max-width: 321px) {
    header,footer {
        font-size:16px
    }
}
 
@media screen and (min-width: 321px) and (max-width:400px) {
    header,footer {
        font-size:17px
    }
}
 
@media screen and (min-width: 400px) {
    header,footer {
        font-size:19px
    }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 移動端頁面設計規范尺寸、h5頁面設計規范尺寸，h5適配轉帖移動端h5頁面不同尺寸屏幕適配兼容方法「移動端」Web頁面適配移動端頁面適配ipad？媒體查詢適配不同移動端屏幕尺寸大小移動端頁面適配———多方案解析再聊移動端頁面的適配移動端頁面適配———多方案解析 PC端、移動端的頁面適配及兼容處理移動端頁面設計規范尺寸大起底