基于 vw 单位的移动端适配方案学习笔记

2024年3月24日 96次阅读 来源: darcrand

基于 vw 单位的移动端适配方案学习笔记

回顾并总结一下移动端适配的一些知识

前提要求

  1. “head”里添加”meta”

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  2. 兼容性,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): eleWidth

.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>
    原文作者：darcrand
    原文地址: https://segmentfault.com/a/1190000019688203
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞