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

Posted 2023-03-29

参考技术A

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

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

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

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

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

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

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

这样就实现了屏幕的适配

结语：屏幕适配的各种兼容情况层出不穷，我这套方案应该也会有不兼容的情况出现，所以如果有更好的解决方案欢迎大家留言。对于一些 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的应用
...

vue 在网页打开适配移动页面大小

参考技术A 写下记得更加深刻！！！

1、在app.vue 判断是否用pc打开，如果是将 html的字体设置55px，当然移动端的单位都是使用rem的前提。

2、因为pc的web滚动条在各个浏览器是不一样，比如：google和火狐还有ie，这样滚动条可能会造成布局乱掉，所以特意找了下大佬们的滚动条插件，有  vue-gemini-scrollbar  和  vuescroll   个人感觉对vue还是特友好的，安装如下

使用就要看你的需求，因为我是全局都要使用所以在main.js引入

然后在组件使用方式是，在需要滚动的区域下包上

在加的时候可以看下外层是否有一个overflow:auto的css属性；把这个属性调成overflow:hidden看下原来的滚动条是否隐藏了，如果是说明这就是你要叫上<GeminiScrollbar>的位置。  vuescroll 也是类似的。暂时测试i9+和火狐，360是可以的

还有就是我发现$('html').css('font-size', '50px')这句好像没有生效，所以我就在index.html加上了font-size:54px !important;

最后就能完美适配。