p.p1 { margin: 0.0px 0.0px 0.0px 36.0px; font: 14.0px Tahoma; color: #e36c0a; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 0.0px 36.0px; font: 12.0px "PingFang SC"; color: #000000; background-color: #d9d9d9 }
p.p3 { margin: 0.0px 0.0px 0.0px 36.0px; font: 10.5px "PingFang SC"; color: #000000; background-color: #eeeeee }
p.p4 { margin: 0.0px 0.0px 0.0px 36.0px; font: 12.0px "PingFang SC"; color: #000000; background-color: #ffffff }
p.p5 { margin: 0.0px 0.0px 0.0px 36.0px; font: 12.0px "Courier New"; color: #404040; background-color: #eeeeee }
p.p6 { margin: 0.0px 0.0px 0.0px 36.0px; font: 10.5px Helvetica; color: #404040; background-color: #eeeeee }
p.p7 { margin: 0.0px 0.0px 0.0px 36.0px; font: 10.5px "PingFang SC"; color: #404040; background-color: #eeeeee }
span.s1 { }
span.s2 { font: 14.0px "PingFang SC" }
span.s3 { background-color: #ffffff }
span.s4 { font: 12.0px "PingFang SC"; background-color: #ffffff }
span.s5 { font: 10.5px Helvetica }
span.s6 { font: 12.0px Helvetica }
span.s7 { font: 12.0px "PingFang SC"; color: #000000; background-color: #ffffff }
span.s8 { font: 12.0px Helvetica; color: #000000; background-color: #ffffff }
span.s9 { font: 10.5px Helvetica; background-color: #dddddd }
span.s10 { font: 10.5px "PingFang SC"; background-color: #dddddd }
span.s11 { font: 10.5px "PingFang SC" }
span.s12 { font: 12.0px "Songti SC" }
span.s13 { font: 12.0px "Courier New" }
参考:https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
首先先弄清楚几个基本的原理知识:
物理像素:又称设备像素,是显示设备中一个最微小的物理部件;
设备独立像素:可认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素
设备像素比 = 物理像素 / 设备独立像素,可通过js的window.devicePixelRatio获取,或css的-webkit-device-pixel-ratio
********ps: iPhone6,设备宽高为375pt*667pt,相当于设备独立像素,dpr=2,那么物理像素就为750pt*1334pt********
1、安装fleible
npm install lib-flexible –save
2、在main.js引入
Import ‘lib-flexible’
3、安装px2rem,使得我们在开发中不需要自己手动计算,照常写px
npm install px2rem-loader --save-dev
4、在build目录下的utils.js修改配置
p.p1 { margin: 0.0px 0.0px 13.0px 0.0px; font: 16.0px "Songti SC"; color: #00b050 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; text-align: justify; font: 12.0px Helvetica; color: #c00000 }
span.s1 { }
span.s2 { font: 16.0px "Times New Roman" }
span.s3 { font: 12.0px "PingFang SC" }
span.s4 { font: 12.0px "PingFang SC"; background-color: #ffffff }
span.s5 { background-color: #ffffff }
重新开启项目,750设计稿,按设计稿来写px;
注意要点:1、在index.html的头部,不要设置meta name=‘viewport‘;
2、考虑到字体文件自带的点阵尺寸,不希望出现15、13px这种奇数字号,字号依然使用px;如:font-size:28px;/*px*/
3、对于1px像素border,为了避免在部分安卓手机丢失,在其后面添加/*no*/,使其不转化为rem单位,如:border:1px solid #000;/*no*/
个人看法:对于flexible适配方案,查阅源码,可得知它对于安卓手机的处理,是统一dpr设置为1来处理,但近年来,国内各个品牌安卓手机的使用人群比例逐渐增加,将其统一处理为1,在大屏幕手机的体验,有失偏颇。
*****如有不同观点或者错误,欢迎指出,好人一生平安~~~
p.p1 { margin: 0.0px 0.0px 13.0px 0.0px; font: 14.0px "PingFang SC"; color: #000000; background-color: #ffffff }
p.p2 { margin: 0.0px 0.0px 13.0px 0.0px; font: 16.0px "Times New Roman"; color: #00b050 }
p.p3 { margin: 0.0px 0.0px 13.0px 0.0px; text-align: justify; font: 14.0px Helvetica; color: #000000 }
span.s1 { }
span.s2 { font: 14.0px Helvetica }
span.s3 { font: 16.0px "Songti SC" }
原文地址:https://www.cnblogs.com/sansgun/p/9259927.html