基於 vw 單位的移動端適配方案學習筆記

時間 2019-12-05

標籤基於單位移動適配方案學習筆記欄目無線简体版

原文原文鏈接

基於 vw 單位的移動端適配方案學習筆記

回顧並總結一下移動端適配的一些知識

前提要求

"head"裏添加"meta"css

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

兼容性,ie9+ (ie8 讓它自個兒玩去吧)

計算 html 的"font-size"

// 設計稿寬度, 750|640|520
var designWith = 750

// 設計稿上1px對應設備上多少個單位的vw, 100vw表示設備屏幕寬度
var vw = 100 / designWith

// html的font-size的大小
// 同時也是單位rem的大小
// 爲了方便後面的尺寸計算,放大100倍,即設計稿上的100px;
var fontSize = 100 * vw

// 設置html的font-size, 能夠直接寫在 css 裏面
document.getElementsByTagName("html")[0].style.fontSize = fontSize + "vw"

使用

設計稿上元素的尺寸(px): eleWidthhtml

.ele {
    width: (eleWidth/100)rem;
}

code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>

        <style>
            html {
                font-size: 13.33333333vw;
                /* 設計稿750px; 此時,1rem對應設計稿上的100px */
            }

            html,
            body {
                margin: 0;
            }

            body {
                /* 設置默認的字體大小,這裏的0.32rem=16px */
                font-size: 0.32rem;
            }

            .list {
                list-style: none;
                padding-left: 0;
                margin: 0;
            }

            .list::after {
                content: "";
                clear: both;
            }

            .box {
                float: left;
                width: 2.5rem;
                height: 2.5rem;
            }
        </style>
    </head>
    <body>
        <ul class="list">
            <li class="box" style="background-color: #2196f3">box 01</li>
            <li class="box" style="background-color: #8bc34a">box 02</li>
            <li class="box" style="background-color: #ff5722">box 03</li>
        </ul>
    </body>
</html>

相關標籤/搜索

每日一句

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