移动端font-size适配方案(续)

概述

之前写过一篇移动端font-size适配方案,但是在实践过程中,还是发现当时的思维太局限了,视野太窄了,所以现在补充更新一下,记录下来,供以后开发时参考,相信对其他人也有用。

我上一篇博文主要有2个误区,下面我一一记下来。

这篇博文参考了移动端适配方案(下)

适配方案

有多种适配方案:

  1. 百分比布局:固定高度,宽度自适应。就是固定高度,宽度用百分比。可以想象,对于不同的屏幕,所有的东西都有横向拉伸,导致非常不好看。
  2. px布局:固定宽度,viewport缩放。就是全部用px,然后用js控制initial-scale的缩放比例。这样在不同屏幕上面,页面都会按比例整体缩放。
  3. rem布局:rem做度量单位,改font-size。

需要注意的是,如果只实现页面整体放大缩小的话,方法1和方法2的效果是一样的!!!

适配目的

我之前说,我们的适配目的是:对于不同的屏幕,页面只需要简单地放大或缩小即可。对于这个目的,上面的方法2和3都能达到效果。

但是,人类发明更宽的设备,并不只是想看到更宽的字体或者更大的页面,而是想看到更漂亮的布局内容。而这才是响应式的精髓:根据不同大小的屏幕展现不同的内容给别人看

所以从这一方面来看,方法2是远远不够的,所以我们需要方法3,优点有2个:

  1. 可以结合rem和px实现部分内容大小不变!
  2. 可以用rem响应式的为不同大小的屏幕展现不同的布局!

目前我只了解到了方法3这个程度,方法3有个局限性,就是对dpr不能很好地适配,所以以后如果有更好的兼容dpr的适配方案,我再记下来。

猜你喜欢

转载自www.cnblogs.com/yangzhou33/p/8955625.html