移动端自适应处理页面布局

Posted 2020-10-28 Panax

处理页面大概会有若干种方案:

1. 第一种就是使用bootstrap;
2. 自己使用自适应单位常用的rem，em ,及别人封装好的插件flexble.js;
   在使用flexble.js;时发现两个问题，高度没有很好的展现，有时会比设计稿低，会造成页面扁平不好看，第二种就是容易造成双手指扩大，这个可以在flexble.js 进行配置，在项目index中去掉meta设置，在flexble.js加上nitial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, shrink-to-fit=no，但是第一个问题没有解决；
3. 所以放弃使用flexble.js,选用他人使用封装好的rem；是 以750px宽度的设计稿，可以适应大部分手机；但有一点缺陷是早期vivo x7 的一类安卓手机原生浏览器或webview中会出现视觉视口小于布局视口的情况；
   最后综合2,3两个,修改js源码依旧没有调好，最后想到的是宽度设置用百分比，高度用3设置的方案rem;

希望大神有全部适应的方案给个demo,谢谢；