淘宝flexible适配方案

淘宝flexiblejs用rem，为什么还要缩放viewport

淘宝使用的自适应方案是lib-flexible。可以在github上找到。

在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

antdesignvue手机怎么适配

我认为缩放viewport有一个目的是为了解决1px边框的问题，不过，这样会导致表情符号被缩小的问题，所以我认为这个类库做了一些修改，让他也不缩放viewport也不影响1px边框，这样就解决了表情符号缩小的问题了。

1. 使用媒体查询，在样式文件中添加媒体查询，根据不同的设备宽度设置不同的样式；

2. 使用flexible.js，自动根据设备宽度调整根元素的font-size，从而实现移动端适配；

3. 使用vw单位，将元素的宽度和高度设置为vw单位，从而实现移动端适配；

4. 使用lib-flexible，自动根据设备宽度调整根元素的font-size，从而实现移动端适配。

原文地址：http://www.qianchusai.com/%E6%B7%98%E5%AE%9Dflexible%E9%80%82%E9%85%8D%E6%96%B9%E6%A1%88.html