vm vh移动端布局及 bilibili官网移动端首页布局

2024-06-19 10:53:40

vm和vh是啥？

市场上的移动端大多数为flex布局，此时我们用到了rem这个单位，但是rem需要媒体查询，要根据页面是尺寸进行修改，而vm/vh省去各种判断和修改，像B站就通过vue和vm写的。

vm/vh是一个相对单位（类似em和rem相对单位）

vm是视口宽度单位

vh是视口高度单位

相对视口的尺寸计算结果

1vm=1/100视口宽度

1vh=1/100视口高度

例如

当前屏幕视口是375px，则1vm就是3.75px,如果当前视口为414，则1vh就是4.14px

25%是，相对于父元素来说的

25vw，相对于当前视口来说的

注意：和百分比有区别的，百分比是相对于父元素来说的。而vm/vh总数针对与当前视口来说的

原理和rem一样，就是把手动档升级到了自动档

vw/vh怎么用？

超级简单，元素单位之间使用新单位vw/vh即可。

因为vw/vh是相对单位，所有不同视口（屏幕）下，宽高一起变化完成适配

为什么现在还是px，和人用的多，这是因为vm/vh的兼容性比较差，主要用于移动端开发。vm/vh是未来的趋势。

如何还原设计稿？

前提：我们设计稿安装iPhone678来设计，有个盒子是50px*50px像素，如何使用vw呢？

分析：

1.设计稿参照iphone678，所有视口宽度尺寸是375px（像素大厨{插件}切换到2x模式）

美工一般提供两倍图或三倍图等,我们使用时压缩,更清晰

2.那么1vw是多少像素？

375px/100=3.75px

3.我们元目标是多少像素？

50px*50px

4.那么50*50是多小vw?

50/3.75=13.333vw

vw注意事项

因为设计到大量除法，还有适应less搭配更好点。

我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的，所有开发中使用vw就好啦(等比例缩放)。vh很少使用。

兼容性：网站：Can I use... Support tables for HTML5, CSS3, etc

案例：bibi官网移动端首页布局

需求：实现在不同宽度设备中等比缩放的网页效果

分析：

1.准备项目目录以及文件

2.准备好字体文件（下载别人网站字体）

检查元素>iconfont样式表>复制字体url到浏览器地址栏>回车

3.准备好less文件

生成的css文件自动放到css文件下面

修改配置，让它生成的文件在css下面

4.准备开始项目内容

1. 头部模块 - suspension-box 悬挂箱子

1. VSCode 转换 vw 插件

2. m-navbar 模块

效果

vm vh移动端布局及 bilibili官网移动端首页布局相关推荐

【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌握HTML网页设计前端盒子的布局.嵌套,及css效果的使用... 微信官网首页主要有以下几个需要关注的 ...
用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端一直想做一个vue项目然后呢我就做了http://www.tuicool.com/articles/eymeiiN 效果预览部分地方不全部根据原版,也有自由发挥 ...
企业网站+Axure企业官网通用模板+公司官网通用模板+web端高保真原型+门户官网+物流企业+门户网站+服务中心+产品中心+新闻中心+帮助中心+企业官网+公司官网+公司网站+登录注册+高保真交互
企业网站+Axure企业官网通用模板+公司官网通用模板+web端高保真原型+门户官网+物流企业+门户网站+服务中心+产品中心+新闻中心+帮助中心+企业官网+公司官网+公司网站+Axure原型+rp原型 ...
暴风影音官网移动端和PC端全部瘫痪
董事长被抓,高管全部辞职官网瘫痪乱码,APP网络异常,至此,暴风影音估计要彻底树倒猢狲散今年7月28日,暴风集团对外公告,公司实际控制人冯鑫因涉嫌犯罪被公安机关采取强制措施,随后公司就开始分崩离析 ...
钢结构机械五金工程建筑基建企业集团公司通用官网/高端大气页面美观
源码介绍 PbootCMS免费授权可商用不限域名高效.简洁. 强悍的可免费商用的PHPCMS源码设备支持:PC端+手机端 1.上传到自己的主机,输入域名打开,会出现授权的页面,直接到pboot ...
vant官网-vant ui 首页-移动端Vue组件库
Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面. 鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址https://vant-co ...
小米官网——简单产品模块布局实现
注意: 标签都是有语义的,合理的地方用合理的标签.比如产品标题就用h,大量文字段落就用p margin和padding大部分情况下可以进行混用,两者各有优缺点,最好根据实际情况,采取简单的方法实现,比 ...
一个简单的网站设计与实现(HTML+CSS)---钻戒官网(5页浮动布局)
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 公司官网网站 | 企业官网 | 酒店官网 | 等网站的设计与制 ...
酱茄企业官网多端开源小程序源码 v1.0.0
简介: 酱茄企业官网Free小程序,酱茄专为中小企业开发的轻量级企业建站小程序(基于Uniapp+WordPress+php+mysql),后台操作简单,维护方便,无需过多配置就能搭建一个企业小程序. ...

最新文章

热门文章