前端viewport手机屏幕适配

参考

基于Viewport的移动端web屏幕基本适配方案详解_viewport适配_。烦啦的博客-CSDN博客

Android屏幕适配总结_android 屏幕适配_此非梦亦非幻的博客-CSDN博客

像素

物理像素：屏幕上的像素点

css像素：设备独立像素（每个屏幕都不一样，chrome按F12的移动设备调试页面可以看到，iphone6的css像素是375，DPI对屏幕角线每英寸的独立像素，DP独立像素）

设备像素比dpr = 物理像素 / css像素

dpr越大，需要使用的图片像素也要越大，不然会显示模糊

viewport

布局视口（手机默认980px的css像素，会比手机屏幕要大，大于iphone6的375px）

可见视口（手机屏幕宽度的ccs像素，如Iphone6是375px，页面的缩放比例 = 布局视口的宽度 / 可见视口的宽度）

理想视口（概念上的视口，通过配置把布局视口宽度等于可见视口宽度css像素，形成1：1）

适配方案

自适应（多套代码）

响应式（一套代码）

rem适配（使用webpack插件 px2rem可以实现快速转换）

计算方式1（以iPhone6的375px尺寸作为16px基准，为不同屏幕调整字体）

1rem=fontsize:16px

font-size: calc(100% + 2 * (100vw - 375px) / 225) 的说明如下：

375px到600px(区间范围225px)的屏幕宽度字体由16px到18px（区间范围2px）之间变化

100%是默认字体的

大小16px + 区间范围变化的2px（区间范围2px*超出的范围/区间范围225px）

常规适配

通过cacl来计算字体大小
html {
    /* iPhone6的375px尺寸作为16px基准，600px正好18px大小 */
    font-size: calc(100% + 2 * (100vw - 375px) / 225);
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 5 * (100vw - 1000px) / 1000);
    }
}
 
html {
    font-size: 16px;
}

 兼容safari的适配

兼容safari
@media screen add (min-width: 320px) {
　　html{
　　　　/*iPone5的320px尺寸为14px,375px时16px*/
　　　　font-size: cacl(87.5% + (100vw - 320px) / 27.5);
　　　　fomt-size: cacl(14px + (100vw - 320px) / 27.5);
　　}
}
@media screen and (min-width: 375px) {
    html {
        /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
        font-size: calc(100% + 2 * (100vw - 375px) / 39);
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}
@media screen and (min-width: 414px) {
    html {
        /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
        font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
        font-size: calc(18px + 4 * (100vw - 414px) / 586);
    }
}
@media screen and (min-width: 600px) {
    html {
        /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
        font-size: calc(125% + 4 * (100vw - 600px) / 400);
        font-size: calc(20px + 4 * (100vw - 600px) / 400);
    }
}
@media screen and (min-width: 1000px) {
    html {
        /* 1000px往后是每100像素0.5px增加 */
        font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
        font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
    }
}

计算方式2（把fontsize设置成10px方便计算，需要浏览器允许fontsize<12px）

1rem=10px fontsize

设计稿375px = 37.5rem

图片大小30px = 3rem

计算方式3（把1rem等于设计稿得1px，免去px到rem的计算，需要浏览器允许fontsize<12px）

如：设计稿宽375px，设计稿中的一个图片100*50px

理想视口css宽度 / 设计稿px宽度 = 根元素fontSize的大小

css像素375/设计稿375=1px，fontsize=1px，1px = 1rem, 

iphone6p css像素414/设计稿375=1.10   fontsize=1.1px ,  1.1px=1rem，100rem*1.1px=110px

计算方式4(px简单转rem)

把屏幕看成一个整体100，然后分成设计稿750份，再*10得出字体大小（也可以*100，转换rem的时候/100）

 /* >=750 */
@media (min-width: 750px) {
    html {
        font-size: calc(100/750*10vw);
    }
}

 300px=30rem

 <div style="width: 300px; height: 300px; background-color:greenyellow;">300px</div>
<div style="width: 30rem;height: 30rem;background-color: brown;">30rem</div>

vw/vh适配

vw : 1vw 等于 视口宽度 的 1%，即100vw等于视口宽度（手机css像素宽度）

vh : 1vh 等于 视口高度 的 1%，即100vh等于视口高度（手机css像素高度）

vmin : 选取 vw 和 vh 中 较小 的那个，手机的宽

vmax : 选取 vw 和 vh 中 较大 的那个，手机的高

css calc()数用于动态计算长度值，百分比，vw/vh 和像素的换算

https://www.cnblogs.com/duoge/p/13907070.html

2023屏幕适配方案对比

知识总结：移动端前端适配方案（总结）_前端浏览器适配_小草莓蹦蹦跳的博客-CSDN博客