移动端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 适配。

相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript