23-移动端布局方式-VM

移动端布局方式-VM

一、单位

vm(vh,vamx,vmin)

  1. vw单位的解释:viewport width 视口的宽度(优点类似于%单位)
  2. 简单换算关系:1vm等于视口宽度的百分之一,100vm=视口的百分百
  3. 思考:100vm === 100%?
    • 在没有滚动条的前提下,成立
    • 由于滚动条也是占位置的,不成立(100%会少一点点)

关于vm单位的推算

  1. 100vm就是等于浏览器全部,设计图宽度也是一样的
  2. 100vm跟设计图的宽度一样,1vm就是设计图的百分之一
  3. 100vm/设计图的大小 = 每一份大小
  4. 量出设计图中每一个区域的大小可以带入计算

二、结合移动端的公式进行推算:dpr=物理像素/逻辑像素

第一种情况:当设计图的大小是640px的时候

  1. 640px/2=320px
  2. 320px=100vw
  3. 1vw=3.2px
  4. 1px=0.3125vw
  5. 既然在640px的设计图中每一份px占据了0.3125vw
    • 导航的高度是88px,设置css为多少? 88px / 2 = 44px * 0.3125 = A vw
    • 底部的高度是100px.设置css为多少? 100px / 2 = 50px * 0.3125 = B vw
  6. 这种方式可以适配大部分终端,但是缺点是每次都需要计算0.3125很麻烦
  7. 既然每次都要计算,那么可以考虑自动计算,如何自动计算呢?
  8. 把量出来的值除以dpr后直接把这个值单位换成rem即可
    • 44px => 44rem
    • 50px => 50rem
  9. 在设计图为640px的情况下,直接把根元素html{font-size:0.3125vw;}

第二种情况:当设计图宽度是750px的时候【重点】

  1. 750px/2=375px
  2. 100vw=375px
  3. 1vw=3.75px
  4. 1px=0.2667vw
  5. 既然在750px的设计图中每一份px占据了0.2667vw
    • 导航的高度是88px,设置css为多少? 88px / 2 = 44px * 0.2667 = A vw
    • 底部的高度是100px.设置css为多少? 100px / 2 = 50px * 0.2667 = B vw
  6. 在设计图宽度是750px的时候,直接把根元素html{font-size:0.2667vw}

三:关于vw单位适配移动端的总结

  1. 当设计图宽度为640px的时候,html{font-size:0.3125vw}
  2. 当设计图宽度为750px的时候,html{font-size:0.2667vw}
  3. 计算公式
    • 第一步:需要根据dpr=物理像素/逻辑像素
    • 第二步:就直接把逻辑像素的单位设置为?rem即可

注意点:

  • vw适配方法和媒体查询没有关系
  • vw视口单位,不仅可以用于移动端布局也可以用于pc端布局
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

echozzi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值