基于 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>