介绍
在开发移动端页面时，经常需要进行屏幕比例适配，以保证在不同设备上展现效果的一致性。代表性的适配方式是rem布局方案。
有很多的rem布局方案或框架可供选择，如手淘的lib-flexible、hotcss等。在这里，我们要介绍另一个npm包——mob-calarea，它可以根据设备的物理尺寸和像素密度来计算屏幕比例。
安装
使用npm安装：
npm install mob-calarea --save
使用
在项目中引入所需的模块：
import calArea from 'mob-calarea'
API
setRootFontSize()
该方法用于计算根字体的大小，并将其应用到页面中：
calArea.setRootFontSize({
designW: 750,
designH: 1334
})- designW: 设计稿的宽度，单位为像素。
- designH: 设计稿的高度，单位为像素（非必选项，默认与设计稿宽度相等）。
getPixelRatio()
该方法返回当前设备的像素密度。
const pixelRatio = calArea.getPixelRatio()
getViewportSize()
该方法返回当前设备的视口大小。
const viewportSize = calArea.getViewportSize()
示例
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------------
-------
------
---- ----------------------- ------------
------- ---------------------------------------------------------------------
--------
-----------------------------
-------- ----
-------- ----
--
---------
-------
---------- -
------ -------
------- -------
---------- --------
------------ ----
----------------- -----
------ -----
----------- -------
-
--------
-------
-------在这个示例中，我们使用setRootFontSize方法计算并设置了根字体的大小，然后使用rem作为单位设置了一个div元素的宽度、高度、字体大小等属性。由于我们的设计稿宽度为750px，根据移动端适配方案的经验，设置一个1rem等于设计稿宽度的1/10，因此这个div元素的宽度为6.4rem（即75px），字体大小为0.32rem（即3.75px）。
总结
使用mob-calarea npm包，可以轻松地进行移动端屏幕比例适配的计算和设置。在进行移动端开发的过程中，对于移动端适配的理解和掌握，是非常必要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555ff81e8991b448d3004