个人学习博客

# 移动端适配方案

  • https://juejin.im/post/6844904038056607752
  • https://juejin.im/post/6844903629111951373

# 主要有两个难点

  • 各屏幕适配
  • Retina屏下的细节处理（主要是1px的问题）

# 方案一： flexible + rem

  • rem （font size of the root element）相对于根元素(即html元素)font-size计算值的倍数
  • flexible 即 flexible.js, 手淘团队提供的一个为该方案屏幕适配而写的一个js库，利用js来自动根据屏幕宽度设置 html元素的font-size的值。
  • UI给到我们的一般是px标注的图，我们将其转化为rem，这个过程其实会花费很大的计算时间。做为一个合格的程序员，我们应该把这种机械性无脑的操作交给计算机来实现。有很多脚手架工具比如：PostCss的插件postcss-px2rem,在构建的时候自动将我们所写的px转换为rem，大大提升了我们的开发效率。

# 方案二：VW（可视窗口的宽度）

  • vw既然是一个尺寸单位，那它的宽度等于多少呢？等于1%整个屏幕的宽度。举个例子，再次以iphone6手机为例，100vw = 750px => 1vw = 7.5px
  • 根据定义，我们了解了在iphone6手机上 1vw = 7.5px
  • 此时手机号的输入框为 490px = 65.333333vw
  • 依次将页面上的px转换为vw，这样我们就得到了全是vw为尺寸单位的页面，同样的px转换为vw，工具网上也是有很多的...postcss-px-to-viewport

# 1px问题

  • 移动端的屏幕不仅仅分辨率有差异，其实还有Retina屏的问题
  • 正常情况下，我们代码里的1px在屏幕上就应该显示一个像素点，但是在Retina屏下则不仅仅是一个像素点。再次拿iphone6为例，其dpr(device pixel ratio)设备像素比为2，css中一个1x1的点，其实在iphone6上是2x2的点,并且1px的边框在devicePixelRatio = 2的Retina屏下会显示成2px，在iPhone6 Plus下甚至会显示成3px。这样的话，我们就会发现在有些手机上1px明显跟另外的一些手机的1px粗细不一样。
  • 这个问题的解决方案有很多，个人觉得最简单方面的还是大漠大大的一种解决方案。使用postcss-write-svg插件
@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%; height: 50%;
    }
  }
.example {
  border: 1px solid transparent;
  border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

//编译后
.example {
  border: 1px solid transparent;
  border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

# 总结

  • 由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方案。vw的兼容方案可以参阅《如何在Vue项目中使用vw实现移动端适配》一文。

  • 参考链接：https://www.cnblogs.com/chenrf/p/9892751.html

← http相关 →