vw/vh rem px 三者的转换(快速入门移动端页面编写)

  • 1:三种单位的转换
  • 2:如何适配移动端的不同设备
  • 前提知识:
    • 手机端的长宽是实际设计过程中的两倍
    • 比如手机端是 750 * 1200
    • 那么具体实现的时候应该是 375px * 600px
    • 好,记住这个结论,当有一张设计图摆在你面前的时候,你只需要将它长宽除以二,就没问题了。
    • 这样说不知道有没有讲明白,没有的话请留言。


三种单位的转换

  • vw / vh

    • 分别是 viewwidth 和 viewheight 的缩写
    • 100vw 等于整个屏幕宽度 100vh等于整个屏幕高度
    • 例如某设备宽高是 375px * 600px
    • 那么 1vw = 3.75px 1vh = 6px
    • 要想适配移动端的设备,只需要讲 html font-size设置为合适的 vw值就可以了(这是其中一种方法)
    • 如果想要让一个盒子覆盖整个页面 需要设置为
        width: 100vw;
    height: 100vh;
  • rem
    • 1rem 等于HTML的字体大小(默认为16px)
    • 使用rem可以使得编写的移动端网页尽可能地适配设备,而不会出现在iphone没有乱,到华为就一团糟的场景
  • px:浏览器的像素,一种相对单位

  • 三者如何转化呢?
  • 例如有一张设计图 375px * 600px
  • 我们可以这样设置HTML的字体大小
html {font-size: 37.5vw;}
  • 这样的话 1rem=37.5vw=100px
  • 代码区内的font-size 37.5也可以取其他的值(1-100),我这样取是因为1rem等于10px的话使用起来更有优势

如何适配移动端的不同设备

  • 例如转换后的长宽分别为 375px 600px
  • 1:定义HTML的字体大小(选择一个对rem和px的转换比较有好的值)
  • 2:下载对应编辑器上的插件,px转rem(vscode是cssrem)
  • 3:设置插件的属性 这是最关键的一步
    • 即px转rem的比例
  • 4:正常编写代码,将这个当做一个PC端的网页写
  • 5:边写边转化为对应的rem值
05-19 17:00