移动端vh适配短屏幕手机,兼容一屏显示问题

rem适配

在日常的移动端开发中,设计稿一般为750 物理像素,而我平时开发的时候,习惯以屏幕宽度为375 ,高度为724 为标准( iPhone X 在微信内置浏览器的宽高) ,如下图所示:

该页面是使用 rem 进行适配,此时该图片宽度为 533px,正常我们需要设置其宽度为5.33rem ,当屏幕高度为724时,可以正常一屏显示完全。

html 复制代码
 <body>
   <div class="content">其他内容</div>
   <img class="pic" src="./images/1.png" />
 </body>
css 复制代码
 * {
   margin: 0;
   padding: 0;
 }
 body {
   background-color: skyblue;
 }
 .content {
   margin-top: 8rem
 }
 .pic {
   width: 5.33rem;
 }

短屏手机显示

而当我模拟短屏幕手机进行预览时,设置屏幕高度为667 ,此时屏幕宽度没有变化,那么根元素 htmlfont-size 也不会发生变化,那么造成的结果就是短屏幕手机上会出现滚动条,无法一屏显示。

但是需求是要求内容一屏能显示完全,此时 rem 适配已经没法做到了,在屏幕宽度不变,但是高度变化的情况下,这该怎么进行适配呢?

没错,这里我想到的是 vh 单位,不使用百分比是因为百分比适配是根据父级的宽高进行计算,而 vh 是根据整个屏幕的高度进行计算。

修改 css 如下所示:

css 复制代码
 .content {
   margin-top: 55.249vh;
   /* margin-top: 8rem; */
 }
 .pic {
   /* width: 5.33rem; */
   width: auto;
   height: 28.66vh;
   max-height: 4.15rem;
 }

vh高度适配

利用 vh 对高度进行适配,但是这个 55.249vh28.66vh 是如何这算出来的呢?

首先我是基于 375*724 进行布局,在724 的高度下,图片宽度 5.33rem,高度没设置,那就是使用了图片533px 时的高度,为 415px

724 的高度下,图片高度使用了 415px,那么在屏幕上显示的应该是207.5px,那如果使用 415px 进行vh 换算,应该是 415 / (724x2) x 100,得出的结果约为28.66 ,这个就是对应的 vh 高度。

那么 55.249vh 同理,原来设置的 8rem,也就是相当于 800px,经过换算后得出结果。

而对图片设置 max-height 是为了不让图片一直随着高度变大得拉伸,以免造成图片变形。

此时在短屏幕手机上显示的效果如下图所示,当然 font-size 我这里没处理,有时候 font-size 也可以使用 vh 适配。

相关推荐
风继续吹..2 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20043 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新3 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干4 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
小杨同学yx5 小时前
前端三剑客之Css---day3
前端·css
Mintopia6 小时前
🧱 用三维点亮前端宇宙:构建你自己的 Three.js 组件库
前端·javascript·three.js
故事与九7 小时前
vue3使用vue-pdf-embed实现前端PDF在线预览
前端·vue.js·pdf
Mintopia7 小时前
🚀 顶点-面碰撞检测之诗:用牛顿法追寻命运的交点
前端·javascript·计算机图形学
wb1897 小时前
企业WEB应用服务器TOMCAT
运维·前端·笔记·tomcat·云计算
烛阴8 小时前
解锁 Gulp 的潜力:高级技巧与工作流优化
前端·javascript