移动端适配谈起

Posted 2021-09-15 soul is free

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端适配谈起相关的知识，希望对你有一定的参考价值。

移动端适配谈起

常用单位

px

绝对单位，一个 px 是一个点，一个像素，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，不会随屏幕变大变小而变化。

em

相对单位，相对于父级的字体大小。如果自身定义了font-size按自身来计算（浏览器默认字体是16px）。不设置的话默认 1em = 16px。em的值并不是固定的，会继承父级元素的字体大小

// 浏览器默认的大小
<style>
    .p {
        font-size: 1em; // 16px
    }
</style>

<body>
    <p class="p">这是p标签</p>
</body>

// 元素嵌套计算的大小
<style>
    .footer {
        font-size: 20px;
    }

    .inner {
        font-size: 1.2em;
    }
</style>

<body>
    <div class="footer">
        1
        <div class="inner inner2">
            2
            <div class="inner inner3">3</div>
        </div>
    </div>
</body>

.footer 的字体大小为 20px
.inner2 的字体大小为 20px * 1.2 = 24px
.inner3 的字体大小为 24px * 1.2 = 28.8px

rem

相对单位，root em，相对于根元素即 html 的字体大小。

<style>
    .inner {
        font-size: 2rem; // 浏览器默认字体16px 16px * 2 = 32px
    }
</style>

<body>
    <div class="inner">3</div>
</body>

<style>
    html {
        font-size: 50px;
    }

    .inner {
        font-size: 2rem; // 50px * 2 = 100px
    }
</style>

rem等比适配

flexible.js 布局详解

// 根据不同设备添加不同的data-dpr值，比如说1、2或者3
// 将屏幕宽度等分为 10份

假如当前设计稿为 750px 
font-size=750/10=75px
设计稿上的元素 rem 值就为 元素px/75
75px=75/75=1rem
12px=12/75=0.16rem

假设设计图宽为375px 对标 iphone6 物理像素是375 因为 dpr为2 那么其设备像素为750px
设计图上的20px 在iphone6上其实是20*2=40px

那么我们可以这么做
fontSize = documentEle.clientWidth / 750 * 100px;
rem =20 * 2 / 100 = 0.4rem

// 或者 
fontSize = documentEle.clientWidth / (750 / 2) * 100px;
rem =20 / 100 = 0.2rem

为什么乘以100 font-size 在chrome强制最小字体为12号
为什么乘以2 dpr 物理像素 * dpr = 设备像素

vw

浏览器内部的可视区域大小 1-100

vw：1vw等于视口宽度的1%。
vh：1vh等于视口高度的1%。
vmin：选取vw和vh中最小的那个
vmax：选取vw和vh中最大的那个

以上是关于移动端适配谈起的主要内容，如果未能解决你的问题，请参考以下文章