WEB頁面實現等比例縮放自適應 - 經過 rem 和 vw 實現

時間 2019-11-06

標籤 web 頁面實現比例縮放自適應經過 rem 欄目 HTML 简体版

原文原文鏈接

WEB頁面實現等比例縮放自適應 - 經過 rem 和 vw 實現

1、rem 和 vw 簡介

1. rem

rem 是相對長度單位，是指相對於根元素(即html元素)font-size(字號大小)的倍數。css

瀏覽器支持：Caniuse

示例

若根元素 font-size 爲 12px

html {
    font-size: 12px;
}
h1 { 
    font-size: 2rem;  /* 2 × 12px = 24px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 12px = 18px */
}
div {
    width: 10rem;  /* 10 × 12px = 120px */
}

若根元素 font-size 爲 16px

html {
    font-size: 16px;
}
h1 { 
    font-size: 2rem;  /* 2 × 16px = 32px */
} 
p {
    font-size: 1.5rem;   /* 1.5 × 16px = 24px */
}
div {
    width: 10rem;  /* 10 × 16px = 160px */
}

2. vw

vw 是相對長度單位，相對於瀏覽器窗口的寬度，瀏覽器窗口寬度被均分爲100個單位的vwhtml

瀏覽器支持：Caniuse

Opera Mini不支持該屬性

示例

當瀏覽器窗口寬度爲320px時，1vw = 3.2px

p {
    font-size: 5vw;   /* 5 × 3.2px = 16px */
}
div {
    width: 20vw;  /* 20 × 3.2px = 64px*/
}

當瀏覽器窗口寬度爲375px時，1vw = 3.75px

p {
    font-size: 5vw;   /* 5 × 3.75px = 18.75px */
}
div {
    width: 20vw;  /* 20 × 3.75px = 75px*/
}

2、rem 和 vw 結合實現WEB頁面等比例縮放自適應

1. 選擇基準窗口寬度及

示例：
以 iPhone 6/7/8/X 的屏幕寬度 375px 做爲基準窗口寬度；
以 15px 最爲 html 元素的 font-size，即rem單位的基本長度。jquery

html {
    font-size: 15px;
}
h1 { 
    font-size: 2rem;  /* 2 × 15px = 30px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 15px = 18px */
}
div {
    width: 10rem;  /* 10 × 15px = 150px*/
}

注意： html 元素的 font-size 不宜過大，也不宜太小。
當 font-size 過大時，以其爲基準的 rem 數值會出現精度丟失，形成較大的偏差。
當 font-size 太小時，因爲不少主流瀏覽器 font-size 不能小於12px，當 font-size 小於12px 時，會以 12px 展現。此時，rem 單位會以 12px 爲基準進行計算，頁面就會整個跑偏。

2. 將 html 元素的 font-size 替換爲使用 vw 表示

窗口寬度：375px 

=> 1vw  = 3.75px
=> 15px = ( 15 / 3.75 )vw = 4vw

所以， html 元素的 font-size 能夠替換爲 4vw瀏覽器

html {
    font-size: 4vw;
}
h1 { 
    font-size: 2rem;  /* 2 × 4vw × 3.75px = 30px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 4vw × 3.75px = 18px */
}
div {
    width: 10rem;  /* 10 × 4vw × 3.75px = 150px*/
}

當窗口寬度調整爲320px時spa

1vw = 3.2px
4vw = 4 × 3.2px = 12.8px

html {
    font-size: 4vw;
}
h1 { 
    font-size: 2rem;  /* 2 × 4vw × 3.2px = 25.6px */
} 
p {
    font-size: 1.2rem;   /* 1.2 × 4vw × 3.2px = 15.36px */
}
div {
    width: 10rem;  /* 10 × 4vw × 3.2px = 128px*/
}

可見，此時全部以rem爲單位的字號和長度都會隨着屏幕寬度的放大和縮小而進行等比例縮放。scala

重要的事情說第二遍
注意： html 元素的 font-size 不宜過大，也不宜太小。
當 font-size 過大時，以其爲基準的 rem 數值會出現精度丟失，形成較大的偏差。
當 font-size 太小時，因爲不少主流瀏覽器 font-size 不能小於12px，當 font-size 小於12px 時，會以 12px 展現。此時，rem 單位會以 12px 爲基準進行計算，頁面就會整個跑偏。

3. 爲頁面設置最大寬度和最小寬度

當頁面小於300px時，再也不等比例縮小，當頁面大於500px時，再也不等比例放大

窗口寬度300px時code

1vw  = 3px
4vw = 4 × 3px = 12px

窗口寬度500px時htm

1vw  = 5px
4vw = 4 × 5px = 20px

@media screen and (max-width: 300px) {
    html {
        width: 300px;
        font-size: 12px;
    }
}

@media screen and (min-width: 500px) {
    html {
        width: 500px;
        font-size: 20px;
        margin: 0 auto;  /* 讓窗口水平居中展現 */
    }
}

3、根據瀏覽器寬度切換PC和WAP頁面

1. 當頁面寬度大於閾值時，自動切換到PC頁面，當小於閾值時，切換回WAP頁面

WAP頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <title>WAP頁面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body id="wap">
    我是WAP頁面
<script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script>
function adapt() {
    var agent;
    var clientWidth = document.body.clientWidth;
    console.log(clientWidth);
    if (clientWidth < 800) {
        agent = 'wap';
    } else {
        agent = 'pc'
    }

    if ($('body').attr('id') !== agent) {
        location.href = 'pc.html';
    }
}
adapt();
window.onresize = function(){
    adapt();
};
</script>
</body>
</html>

PC頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <title>我是PC頁面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body id="pc">
    我是PC頁面
<script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script>
function adapt() {
    var agent;
    var clientWidth = document.body.clientWidth;
    console.log(clientWidth);
    if (clientWidth < 800) {
        agent = 'wap';
    } else {
        agent = 'pc'
    }

    if ($('body').attr('id') !== agent) {
        location.href = 'wap.html';
    }
}
adapt();
window.onresize = function(){
    adapt();
};
</script>
</body>
</html>

相關標籤/搜索

每日一句

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