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

相关推荐
江城开朗的豌豆3 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆4 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆5 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er12 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子13 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆17 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js
十里青山25 分钟前
超好用的vue图片预览插件更新啦,hevue-img-preview 7.0.0版本正式发布,支持vue2/vue3/移动/pc,增加缩略图、下载、自定义样式等
前端·javascript·vue.js
lichenyang45334 分钟前
css模块化以及rem布局
前端·javascript·css
小熊哥^--^36 分钟前
条件渲染 v-show与v-if
前端