移动端布局方式-VM

一、单位

vm(vh,vamx,vmin)

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

关于vm单位的推算

100vm就是等于浏览器全部，设计图宽度也是一样的

100vm跟设计图的宽度一样，1vm就是设计图的百分之一

100vm/设计图的大小 = 每一份大小

量出设计图中每一个区域的大小可以带入计算

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

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

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

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

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

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

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

注意点：

vw适配方法和媒体查询没有关系

vw视口单位，不仅可以用于移动端布局也可以用于pc端布局

23-移动端布局方式-VM相关推荐

【CSS】关于CSS的几种移动端布局方式
关于CSS的几种移动端布局方式一.移动端布局 01.meta视口标签设置 02.移动布局的分类有哪些? 03.为什么需要二倍图? (1)物理像素和物理像素比 (2)二倍图(根据需要确定多倍图) (3 ...
22-移动端布局方式-rem
文章目录移动端布局rem 一.移动端布局需要进行计算适配二.关于dpr的推算三.推算移动端布局公式四.移动端布局单位 rem 五.关于移动端布局rem方式的总结移动端布局rem 一.移动端布 ...
移动端布局的5种方式
刚换公司,设计稿还没出,也没有安排新任务,所以抽空整理一下移动端布局方式. 移动端布局方式整理: 1.固定meta视图 <meta name="viewport" conte ...
移动端布局 - REM方式
默认以宽度为640px的设计稿为基准页面,然后通过JS获取当前显示设备的尺寸,对应的调整 html 标签的font-size大小,从而实现通过以rem为单位的移动端布局适配. 具体代码 (functi ...
移动端页面布局方式，简单记录一下
目录 1.视口 2.多倍图 3.移动端开发选择 4.移动端技术解决方案 5.移动端常见布局 6.流式布局 7.flex弹性布局 ①flex与传统布局比较 ②flex布局原理 ③常见父项属性 8.rem ...
移动端有哪些常见布局方式？
大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直.纯洁.善良的前端程序员. 今天给大家分享一下,修真院官网css任务13,深度思考中的知识点--移动端有哪些常见布局方式? 1.背景介绍随着智 ...
移动端常见的开发布局方式
一.流式布局流式布局就是百分比布局,也称非固定像素布局.它通过将盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充.流式布局方式是移动web开发中使用的比较常见的布 ...
移动端常见布局方式(流式布局、flex弹性布局、less+rem+媒体查询、Bootstrap)
目录一:移动端页面 1.流式布局(百分比布局) 2.flex弹性布局(重点♥) flex布局初体验: flex布局原理: flex布局父项常见属性 flex-direction 设置主轴的方向 ♥ ...
vm vh移动端布局及 bilibili官网移动端首页布局
vm和vh是啥? 市场上的移动端大多数为flex布局,此时我们用到了rem这个单位,但是rem需要媒体查询,要根据页面是尺寸进行修改,而vm/vh省去各种判断和修改,像B站就通过vue和vm写的. v ...

23-移动端布局方式-VM

文章目录

移动端布局方式-VM

一、单位

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

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

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

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

23-移动端布局方式-VM相关推荐

最新文章

热门文章