vue react 移动端适配 viewpoint @media iphonex刘海屏适配

对于需要在移动端展示的页面来说，由于移动设备各种各样，展现效果也就有了很大的不同，所以做移动端适配是个费劲但是又不得不做的事情。那么我们来说一下如何去应对这种情况。

对于移动端适配，要从2个角度去考虑：
第一个就是需要根据分辨率不同自适应页面大小
第二个是对于刘海屏的特殊处理
所以我们需要使用2套方案来完成移动端的适配

1、分辨率自适应方案

网上有大量的文章来讲分辨率自适应方案，比如rem计算font-size字体大小来作为单位进行像素的换算，比如使用css3新的语法 vw vh 等等百分比单位来计算，等等。相信如果一个新手来看这一堆东西，估计会蒙半天，特别是rem的计算方式，太过繁杂。
根据我花费了大量时间之后总结出来的经验，我最终确定了一个方案来实现。我觉得这个是目前还算简便的方式，所以记录在这里。那就是 ----- 利用scss函数方式结合 vw vh 百分比显示

通常我们会拿到一个UI设计稿，UI设计稿上会有设计时屏幕的宽高（如果没有UI稿就自己确定一个长宽就可以了）
理解起来非常简单：就2步

创建公共scss文件，这样就可以是用scss提供的函数方法，声明计算宽、高的函数，设置屏幕长宽UI标准

@function pxToVw($px, $screen-width: 1334) {
  @return ($px / $screen-width) * 100vw;
}

@function pxToVh($px, $screen-height: 750) {
  @return ($px / $screen-height) * 100vh;
}

使用时引入公共scss文件，调用方法传入UI稿元素的长或宽，即可计算出百分比

.countdown {
  right: pxToVw(40);
  top: pxToVh(40);
}

如此设置，不管在小屏，大屏，手机，平板，pc，都会按比例缩放显示元素了

2、刘海屏适配方案

关于刘海屏，等异形屏，我的首要建议就是对于能够从UI设计上就能预留出刘海高度的，最好能直接预留出高度设计。这样就不需要做异形屏幕的适配。
正常来说，我们的页面会分为以下两种情况

有状态栏的界面：刘海不会遮挡主要内容区域，无需适配
无状态栏的全屏界面：刘海可能会遮挡主要内容，需要适配

首先，对于屏幕的区分适配，我们需要使用viewport来实现，所以首先在index.html引入mate，开启viewport

// 在index.html中
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />

对于其中参数不明白的，可以参考其他教程中的解释，在此我就不再赘述了，比如在文章底部列出的参考文章。

对于各种屏幕的特殊处理，我们采用@media 方案来实现
对于是否有刘海屏，我们可以利用constant函数来判断是否有安全区域（刘海屏）

// 在scss文件中
@supports(bottom:constant(safe-area-inset-bottom)) { // 如果存在底部安全区域
    .button {
        padding-bottom:constant(safe-area-inset-bottom); 
        // padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); 
    }
}
@supports(bottom:env(safe-area-inset-bottom)) { // 如果存在底部安全区域
    .button {
       padding-bottom:env(safe-area-inset-bottom); 
       // padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); 
    }
}

对于其他屏幕类型的处理
介绍下对于@media的使用，简单示例如下，可根据@media的详细参数做各种配置

// 在scss文件中
@media only screen
and (min-device-height : 768px) // 最小设备显示高度768 -意思是当设备高度大于768时生效
and (max-device-height : 1024px) // 最大设备显示高度1024 -意思是当设备高度小于1024时生效
and (orientation : landscape) { // 横屏时生效
  .titleStyle {
    font-size: 20px;
  }
}

这样就实现了屏幕的适配

结语：屏幕适配的各种兼容情况层出不穷，我这套方案应该也会有不兼容的情况出现，所以如果有更好的解决方案欢迎大家留言。对于一些 constant env calc safe-area-inset-bottom 等等这些语法不熟悉的话，大家可以去搜索下，一搜就有。希望这套方案足够简洁明了，能够帮助到一些想快速实现的朋友。

感谢其他作者宝贵的经验和参考：
https://www.cnblogs.com/gaogch/p/10628613.html - 有关viewport的介绍
https://www.runoob.com/cssref/css3-pr-mediaquery.html - 菜鸟课堂有关@media的各种参数的整理介绍
https://segmentfault.com/a/1190000012309030 - 对于@supports方法的展示
https://www.cnblogs.com/august-8/p/4537685.html - 对于@media的应用
https://blog.csdn.net/soband_xiang/article/details/87909092 - 对于@media的应用
...