程序员经验分享-hwhale

CSS_IOS适配状态栏和IOS底部安全区域

2023-11-09

状态栏

var(--status-bar-height)

计算属性

height: calc(var(--status-bar-height) + 343px);

底部安全区

先constant再env

constant(safe-area-inset-bottom)
env(safe-area-inset-bottom)

计算属性

height: calc(132px + constant(safe-area-inset-bottom));
height: calc(132px + env(safe-area-inset-bottom));

safe-area-inset-left: 安全区域距离左边界的距离
safe-area-inset-right: 安全区域距离右边界的距离
safe-area-inset-top: 安全区域距离顶部边界的距离
safe-area-inset-bottom: 安全区域距离底部边界的距离

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS

CSS3

CSS_IOS适配状态栏和IOS底部安全区域 的相关文章

  • 客户管理系统CRM表格版,含销售合同客户关系维护等功能

    客户管理系统CRM表格版 含销售合同客户关系维护等功能 系统由EXCEL开发 绿色安全 简单好用 送VBA宏插件编号 139653845009471设计师儿

  • 这里推荐几个前端动画效果网站

    1 AnimistaAnimista 是一个 CSS 动画 转场库和在线工具 它有许多现成的 CSS 动画片段可以直接使用 也可以在线定制动画 网站地址 Animista On Demand CSS Animations Library 2

  • Flex布局详解

    目录 一 Flex 布局是什么 二 基本概念 三 容器的属性 3 1 flex direction属性 3 2 flex wrap属性 3 3 flex flow 3 4 justify content属性 3 5 align items属

  • 机器视觉基础

    机器视觉基础 什么是机器视觉 机器视觉常见的应用 机器视觉常用的概念 硬件选型 控制器 相机 镜头 附件选型 什么是机器视觉 机器视觉常见的应用 机器视觉常用的概念 快门时间越短 图片越暗淡 光圈小了 照片会暗淡 硬件选型的时候考虑物距 W

  • flex伸缩布局看着一篇就够啦

    flex伸缩布局 flex弹性概念 弹性盒子是一种按行或者按列布局元素的一种布局方式 它是需要父子盒子嵌套使用的 作用在父盒子 容器 上的属性有 flex direction 改变轴方向 flex wrap 换行 flex flow 前两项

  • 软件设计师--结构化开发

    结构化开发 耦合 真题 内聚 真题 设计原则 真题 系统文档 真题 数据流图 数据流图基本数据元素 外部实体 数据存储 加工 数据流 父图子图平衡 加工既要有输入数据流也要有输出数据流 数据守恒 真题 数据字典 真题 杂题精选 耦合 真题

  • HTML5-单、多选框，按钮

    属性 说明 type 指定元素的类型 text password checkbox radio submit reset file hidden image和button 默认为text name 指定表单元素的名称 value 元素的初始

  • el-switch在按钮内加文字内嵌文字

    产品需求 在按钮内内嵌对应操作文字 原生展示效果 升级展示效果 解决方案 按钮

  • box-shadow 设置后看不到的问题

    引子 在修复问题的时候 发现一个元素设置了 box shadow 属性 其它的元素也有公用 但这个元素的阴影看不见 试着把颜色值变的更明显 但还是看不到 问题示例 示例二维码 Origin My GitHub 问题原因 首先想到是不是属性写

  • HTML5口红西瓜见缝插针小游戏代码

    下载地址 口红西瓜HTML5见缝插针手机游戏代码 口红西瓜见缝插针手机游戏源代码 dd

  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件

  • CSS 学习笔记（基础）

    用来控制网页表现的语言 CSS Cascading Style Sheet 层叠样式表 然后我们继续看看 W3C 标准 结构 HTML 表现 CSS 行为 JavaScript CSS导入方式 选择器 属性 由于网页的框架结构是由HTML实

  • 更改element button 按钮颜色

    在全局的index scss里面改 显示时按钮样式 el button inblack 需要更改的按钮类型 background 060606 important border color 060606 important color ff

  • css中float用法

    float浮动 指将指定元素悬浮于所在整体之上 即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的 对于这个顺序我们称之为标准流 而浮动则是脱离标准流的另一个独立标准 下面给出float定义 float left 左浮

  • HTML+CSS3 5个炫酷的loading

    为了方便大家方便CV 每个loading对应一个html文件 文件下载压缩包 下载地址 https download csdn net download m0 48850204 20432352 spm 1001 2014 3001 550

  • 移动端适配-01-百分比宽度

    1 图片可以在parent中使用 1 line heigh和text align使水平和竖直居中 2 在img标签中加vertical align middle 2 3 background size 1 两个参数 background s

  • 若依ruoyi——手把手教你制作自己的管理系统【二、修改样式】

    阿里图标一 图片白嫖一 3 专栏略长 爆肝万字 细节狂魔 请准备好一键三连 运行成功后 idea后台正常先挂着 我习惯用VScode操作 当然如果有两台机子 一个挂后台一个改前端就更好了 只需修改vue config js配置文件即可 eg

  • 第8章 多媒体嵌入

    学习目标 了解视频 音频嵌入技术 能够总结HTML5视频 音频嵌入技术的优点 了解常用的视频文件格式和音频文件格式 能够归纳HTML5支持的视频和音频格式 掌握HTML5中视频的嵌入方法 能够在HTML5页面中添加视频文件 掌握HTML5中

  • gird布局隔行格列修改样式

    使用 nth child 选择器和公式 an b 两列隔行

  • vue实现 marquee(走马灯)

    样式 代码 div class marquee prompt div class list prompt span class prompt item span div div data return listPrompt xxx xxxx

随机推荐

热门标签