0%

移动端适配方案rem

背景

公司最近要做一个 web 网页(只设计了 pc 端)移动端的适配,我也是第一次做涉及到移动端的开发,前期在网上查了一些资料,总结方案如下:

  1. 固定高度,宽度自适应

  2. 固定宽度,viewport 缩放

  3. rem 做宽度,viewport 缩放

用 rem 来页面,会根据不同的设备宽度在根元素上设置不同的字体大小。然后使用px替换rem。这样做以后,字体大小,内容尺寸,对随着屏幕宽度的变大而变大。

第一种方案太笨,后面两种都可以做到更好的适配,第三种比较灵活一点。所以采用第三种方案来做适配

涉及到的知识点

  1. viewport

    在电脑浏览器中,viewport 就是浏览器窗口的宽度高度。在移动端设备上就很复杂,简单点来说就是你看到的屏幕大小

  2. 物理像素

    物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件

  3. 设备独立像素(density-independent pixel)

    设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说 CSS 像素),然后由相关系统转换为物理像素

  4. CSS 像素

    CSS 像素是一个抽像的单位,主要使用在浏览器上,用来精确度量 Web 页面上的内容。一般情况之下,CSS 像素称为与设备无关的像素(device-independent pixel),简称 DIPs

  5. 屏幕密度

    屏幕密度是指一个设备表面上存在的像素数量,它通常以每英寸有多少像素来计算(PPI)

  6. 设备像素比(device pixel ratio)

    简称 dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按设备像素比 = 物理像素 / 设备独立像素计算得到

  7. rem

    就是根元素<html>font-size大小

实践

使用lib-flexible,它会帮我们计算好 rem。接下来把视觉稿中的px转换成rem就行了,但是每次转换会很费时间,所以我们可以借助插件来帮我们完成,这里我采用的是 px2rem-loader(webpack)。最后你就可以放心的按照设计稿开发了。


参考使用 Flexible 实现手淘 H5 页面的终端适配