vue rem移动端适配

匿名 (未验证) 提交于 2019-12-03 00:39:02

参考:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

首先先弄清楚几个基本的原理知识:

:又称设备像素,是显示设备中一个最微小的物理部件;

:可认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素

设备像素比 = 物理像素 / 设备独立像素,可通过js的window.devicePixelRatio获取,或css的-webkit-device-pixel-ratio

********ps:

1、安装fleible

 

2、在main.js引入

Import ‘lib-flexible’

3、安装px2rem,使得我们在开发中不需要自己手动计算,照常写px

npm install px2rem-loader --save-dev

4、在build目录下的utils.js修改配置

重新开启项目,750设计稿,按设计稿来写px;

注意要点:1、在index.html的头部,不要设置meta name=‘viewport‘;

个人看法:对于flexible适配方案,查阅源码,可得知它对于安卓手机的处理,是统一dpr设置为1来处理,但近年来,国内各个品牌安卓手机的使用人群比例逐渐增加,将其统一处理为1,在大屏幕手机的体验,有失偏颇。

*****如有不同观点或者错误,欢迎指出,好人一生平安~~~

原文:https://www.cnblogs.com/sansgun/p/9259927.html

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!