移动端高清方案

最新推荐文章于 2024-05-20 20:26:39 发布

DragonWar%

最新推荐文章于 2024-05-20 20:26:39 发布

阅读量430

点赞数

文章标签： python webpack 前端 ViewUI

原文链接：https://my.oschina.net/wanjubang/blog/1517623

版权

2019独角兽企业重金招聘Python工程师标准>>>

问题

我们遇到了什么问题？

在不同大小和高清的屏幕下：

如何保证界面布局一致性：不错乱，不变形
如何保证字体大小一致性：大屏显示更大，小屏显示更小或更多
如何保证 1px边框一致性：不同的高清屏也在正常显示1px的高度大小
如何保证图片清晰度一致性：不同大小和高清屏下都能看到清晰的图片
。。。

几个概念

讨论这个问题之前，要先明白像素的概念。

设备像素(device pixel):
设备像素设是物理概念，指的是设备中使用的物理像素。
比如iPhone 5的分辨率640 x 1136px。

CSS像素(css pixel):
CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。px是一个相对单位，相对的是设备像素(device pixel)。

比如iPhone 5使用的是Retina视网膜屏幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以设备像素数为640 x 1136px，而CSS逻辑像素数为320 x 568px。

可以我们普通写代码的时候用的是css 像素，但是不同ppi（像素密度）的手机对于css 1px 的”解释“ 是不同的。比如 iphone6 会用四个像素渲染一个css 像素。如果我们不加区别的写css 像素在不用手机运行的话，会怎么样？比如我有一个640 的普通手机和 iphone6 ，那么他们渲染同一个1px宽的元素，iphone6 使用的是 2/640 设备宽度。普通手机使用的是1/640 设备宽度 . 也就说iphone 6 看起来更宽了。怎么解决？请往下看。

实施方案

关于高清的显示方案，并不是一个唯一的正确的方案。高清方案有好多，淘宝的高清方案就和支付宝的不同，更不用说别的方案了。本文主要讨论目前比较流行的rem 方案。

ant-mobile 采用的是淘宝方案， 1rem = 100px 。 dingui 采用支付宝的方案， 1rem = 75px

由于项目使用antm 的原因，因此介绍下淘宝的高清方案。高清方案主要点在于，在不同清晰度的手机上都可以更好的展示，不至于在高分辨率手机上会比较小等不一致问题。

主要步骤：

1. 设置 viewport，动态给html 添加fontSize用于后续rem

2. 写代码还是px，因此需要px 到 rem 的主动转化工具。不同分辨率手机上显示的rem相同，

但是由于html font-size 不同，因此 rem 对应的css像素不同，但是代表的物理像素相同（这也是我在题头介绍的，高清方案解决的问题）。我是用的插件是postcss-pxtorem-plugin

webpack中这样配置：

  // npm install postcss-pxtorem@^3.3.1 --save-dev
  const pxtorem = require('postcss-pxtorem');
  webpackConfig.postcss.push(pxtorem({
    rootValue: 100, // 750页面 1rem = 100px
    propWhiteList: [],
  }));

3. 高清图片处理

可以看下手机淘宝前端的图片相关工作流程梳理案：https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Famfe%2Farticle%2Fissues%2F8