为什么没有设计稿呢？ 这样学起来累死了。

Question

为什么没有设计稿呢？ 这样学起来累死了。

Answer 1

one_pieces 2023-02-23 11:59: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 值。

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

Answer 2

one_pieces 2023-02-23 00:03:26

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

• 提问者 慕婉清9322644 #1

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