ipone移动端底部安全区域化适配

<template><div class="c-fixed-bottom"><!-- 空白占位 --><div class="c-fixed-bottom__seat" /><div class="c-fixed-bottom__positioner" :style="customStyle"><slot></slot></div></div>
</template><script lang="ts">
import Vue from 'vue'
export default Vue.extend({props: {customStyle: {type: Object,default: () => ({}),},},
})
</script><style lang="less" scoped>
.c-fixed-bottom {&__positioner {background: #fff;position: fixed;bottom: 0;left: 0;right: 0;box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.08);z-index: 99;border-style: solid;border-color: #fff;}@supports (height: constant(safe-area-inset-top)) {&__seat {height: constant(safe-area-inset-bottom); // 兼容 IOS < 11.2}&__positioner {border-bottom-width: constant(safe-area-inset-bottom); // 兼容 IOS < 11.2}}@supports (border-bottom-width: env(safe-area-inset-top)) {&__seat {height: env(safe-area-inset-bottom); // 兼容 IOS > 11.2;}&__positioner {border-bottom-width: env(safe-area-inset-bottom); // 兼容 IOS > 11.2;}}
}
</style>

在使用时候直接进行：

import FixedBottom from '@/components/fixed-bottom/index.vue'

components: {FixedBottom,},

<fixed-bottom> 这里面正常写底部样式就可以 </fixed-bottom>

ipone移动端底部安全区域化适配相关推荐

[转载]input[type=file]在移动端各浏览器无法适配打开相机的问题。
原文地址:input[type=file]在移动端各浏览器无法适配打开相机的问题.作者:韩小文近期有一需求是拍照上传用户头像并能进行区域性的截取操作. 故使用了input[type=file]标签进 ...
Vue项目中公用footer组件底部位置的适配问题
vue项目中公用footer组件底部位置的适配问题需求: footer为公用组件,其他页面都需要引入,这是会存在一种情况:有的页面高度很高,footer组件要放在内容的最后:有的页面内容很少,高度很 ...
android底部导航栏svg,vue开发移动端底部导航条功能
效果图 src/app.vue 头部导航内容区域 import Tabbar from 'components/tabbar'; export default { name: 'App', comp ...
MUI框架：移动端底部固定mui-bar-tab布局 - 案例篇
移动端布局:自定义MUI底部tabs选项卡(nav组件 · 底部固定mui-bar-tab) · 案例演示效果图 html代码实例 · 如下: <!doctype html> <h ...
NIUSHOP wap端底部导航设置
WAP端底部导航设置底部导航(同首页导航,当你没有做到足够好的商品关联时,只要你精心设置好你的网站导航,它就可以让你店铺的各个页面串联起来,方便买家在栏目间快速切换,引导买家前往您期望的页面.) 底 ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
【适配】521- 移动端开发各种兼容适配问题（屏幕、图像、字体与布局等）
来源 | https://www.cnblogs.com/coco1s/p/11463599.html 本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之 ...
移动端开发的兼容适配与性能优化干货分享
作者:ChokCoco https://www.cnblogs.com/coco1s/p/11463599.html 本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅, ...
PC端的一些简单适配
PC端的一些简单适配不同比例的屏幕需要展示的内容一样 16:9 24:9 32:9的屏幕比例需要显示同样的内容主要是使用的是rem布局, 这里通过调节不同分辨率的时候, 左边盒子和中间盒子的宽度比 ...

ipone移动端底部安全区域化适配

ipone移动端底部安全区域化适配相关推荐

最新文章

热门文章