移动端自适应布局-rem

340 阅读1分钟

自适应布局

  1. 设置viewport进行缩放

    参考rem是如何实现自适应布局的?-前端开发博客 (caibaojian.com)

  2. 在html中设置font-size

    rem等比例,设置html的font-size

    1. 通过设置html的font-size属性,其中计算如下:

      那怎么确定html的font-size呢

      1418903956

      其中宽度为屏幕宽度,

    2. 在vscode设置Root Font-Size

      将px转为rem

      参考vscode如何将px转换为rem-站长资讯网 (info110.com)

      文件——》首选项——》设置——》扩展

image-20210706093812831.png

  root font-size = 750/10 = 75

  (750为设计图的宽度,10为固定系数)

  没有的话,在扩展里面安装:px2rem
  
 

image-20210706093803783.png

疑惑:font-size=总屏幕宽度/系数,系数是固定的吗