2回答

one_pieces

2023-02-23

明白同学的问题了，同学的问题应该是移动端适配相关的问题，也就是页面缩放。这个问题有专门的小节讲解，在这里 https://coding.imooc.com/lesson/625.html#mid=61478。

这里老师再讲一下，首先这里有两个部分，第一个部分是计算页面根节点的 font-size，这里就使用了这个公式 

document.documentElement.style.fontSize = (deviceWidth * rootValue) / rootWidth + 'px'

公式的推导可以看下上面小节的讲解，就是大概下图这个位置。可以看到 rootValue 对应的就是“设计稿中的 body”的fontSize，rootWidth 对应的是“设计稿中的屏幕”width。

第二个部分就是将我们的样式单位从 px 改成 rem，这里使用到下图这个公式。

因为这个转换步骤我们人手算会很麻烦，所以这里就借助 postcss 的一个插件 postcss-pxtorem 来帮助我们主动转换。配置里的 rootValue 就是上图里的 “body的fontSize”px 值。

经过上面两个部分，就能通过自动缩放页面，实现移动端适配了~

0

0

one_pieces

2023-02-23

同学你好，如果是想知道每个样式的话，可以看看代码库（https://git.imooc.com/coding-625/ele-h5）相关的 <style> 哈~

0

1

慕婉清9322644

不是的 不是很理解 const rootWidth = 390 const rootValue = 16 html.style.fontSize = `${(deviceWidth * rootValue) * rootWidth}px` 为什么要这样配置 'postcss-pxtorem': { rootValue: 16, propList: ['*'], selectorBlackList: [':root'] } 这是375设计稿呢 还是什么？750设计稿又怎么配置 没听懂。就看到老师写了

2023-02-23

共1条回复