1回答

Sunday

2019-08-11

已采纳

首先，我们先明确目的，之所以定义  htmlFontSize （3-10 视频创建），和 dimen.scss 中的 px2rem 方法，他的目的就是：在面对不同的设备的时候，我们指定的相同的像素，可以根据设备的大小来展示不同的像素数。

1、使用 window.innnerWidth 除以10 ，包括我们的定义的 MAX_FONT_SIZE ，其实目的就是要把 html 的fontSize 控制在一个相对比较合理的范围之内。这里的 10  和  MAX_FONT_SIZE 都是根据经验来得到的一个相对合理的大小。并不是一个必须要这么大的值。 

经过 htmlFontSize （3-10 视频创建）这个 js 文件计算之后，那么 html 的fontsize 就会在 12 （一般情况下浏览器最低指定的fontsize） 到 42 之间。

2、第二个问题，是不需要在除以2的。假设 我们的设备横向像素宽度为 750 ，那么 html 的 fontSize 应该为我们定义的 MAX_FONT_SIZE 最大值，也就是 42 。配合 dimen.scss 中指定的 $rootFontSize: 375 / 10; 的值，那么当我们使用 px2rem 这个方法的时候，比如 px2rem(20) = 20 / 37.5 + 'rem' ，也就是 20 / 37.5 * 42 个像素值 ， 也就是 22.4 px 。 

22.4px 就达到了我们的目的，也就是：在面对不同的设备的时候，我们指定的相同的像素，可以根据设备的大小来展示不同的像素数。

0

5

慕前端9400822

回复

Sunday

嗯嗯，谢谢老师

2019-08-21

共5条回复