文档介绍：移动端适配解决方案
 
   
 
 
 
 
 
 
 
     
 
 
 
 
 
优化以前写过的一篇文章：: 8, } }, { loader: 'postcss-loader', options: { plugins: [require("autoprefixer")("last 100 versions")] } }, 'less-loader', ] },
这里有个问题，=1来适配的，那自然是不行的，我们修改一下源码，改为按devicePixelRatio显示
if (isIPhone) { // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) { dpr = 2; } else { dpr = 1; } } else { // 其他设备下，仍旧使用1倍的方案 dpr = devicePixelRatio; //这里将原来=1改为devicePixelRatio }
然后写针对不同dpr下字体大小的适配，这里用less实现：
.font-dpr(***@font-size) { font-size: ***@font-size; [data-dpr="1"] & { font-size: ***@font-size; } [data-dpr="2"] & { font-size: ***@font-size * 2; } //for mx3 [data-dpr=""] & { font-size: ***@font-size * 2; } //for 小米note,for 小米mix [data-dpr=""] & { font-size: ***@font-size * ; } [data-dpr="3"] & { font-size: ***@font-size * ; } //for 三星note4 ,三星s6 [data-dpr="4"] & { font-size: ***@font-size * 2; } }
-dpr(20) 就可以了。
方案二：使用less或者sass等CSS 预处理语言写适配方案
参考链接：#heading-7
基准按照设计图尺寸，进行vw,vh换算，设置html元素字体大小。
***@baseDesign: 375; // 设计图尺寸默认按宽为375 ***@baseSize: ***@baseDesign/10; // 设计图尺寸默认按宽为375 / 10 .font-size(***@px) { font-size: (***@px/***@baseSize/2)*1rem; } .margin(***@px) { margin: (***@px/***@baseSize/2)*