关于转化rem的问题

Question

1. 为什么要讲window.innnerWidth 除以10?
2. 设计稿中的UI图一般都是750的宽,如果一个按钮的宽度是20*40,那么用函数转化的时候是否还需要除以2?

Answer 1

Sunday 2019-08-11 10:20:12

首先，我们先明确目的，之所以定义  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 就达到了我们的目的，也就是：在面对不同的设备的时候，我们指定的相同的像素，可以根据设备的大小来展示不同的像素数。

• 提问者 wykun #1

  感谢老师，讲的太详细了。

• 慕前端9400822 #2

  老师，所有涉及尺寸大小的地方都用rem代替px吗，还是说px和rem各有适用情况呢。

• Sunday 回复 慕前端9400822 #3

  回复 weixin_厉害了wold哥_0：rem 的使用在于需要让指定的尺寸根据设备的大小来展示不同的像素数的地方。比如最典型的就是 fontSize 。 这里最好是使用rem来代替 px使用。
  
  而对于navBarHeight 这种 navBar 的高度，使用 rem 或者 px 就都可以了。这种高度 使用 rem 或者 px 在视觉上都不会差距特别的大。
  
  而对于某些个别的设计 。 常见的比如说，当前的这个信息回复框，他就是一个固定大小的，654*205 的块元素 。 这个时候对于这种无论在多大的屏幕中都要展示固定大小的元素 ，就需要使用 px 了。

点开查看后面2条评论