去除刘海css

于 2023-12-12 13:36:52 发布
阅读量443 收藏 7
点赞数 8
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51412569/article/details/134947258
版权

    padding-left: var(--status-bar-height); //是计算状态栏的高度
    padding-left: calc(var(--status-bar-height)); //如果不可以可以按照这个加或者减一些高度
 

代码的死对头
关注
「iPhone去掉刘海？采用‘药丸’设计，你会接受吗？编程」
ByteJolt的博客
09-27 36
随着技术的发展和设计的进一步优化，我们可以期待看到更多创新的智能手机设计在未来的市场上推出。然而，近期有传闻称，苹果公司可能考虑将其标志性的刘海设计替换为药丸形状，以提供更大的屏幕显示区域。本文将探讨这种设计变化的可能性，并提供一个简单的示例代码，演示如何使用编程语言实现一个药丸形状的界面。这只是一个简单的示例，实际上，苹果公司在实施这样的设计变化时可能会涉及更复杂的工程任务，例如重新设计操作系统的用户界面元素和应用程序的布局。下面是一个使用HTML和CSS的简单示例代码，展示如何创建一个药丸形状的界面。
CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口
qq_49279305的博客
10-25 1435
CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口
针对iPhone刘海屏的scss媒体查询封装
WangQing2508的博客
11-13 586
最新 iPhone 刘海屏设备信息整理 包含iPhone12 最新系列 对应的css媒体查询 @mixin bangs { @media only screen and (device-width: 360px) and (device-height: 780px) and (-webkit-device-pixel-ratio: 3), //12 mini only screen and (device-width: 375px) and (device-height: 812px) and (-
CSS适配刘海屏的几种方式
BY_xueke的个人空间
06-08 5071
前言 前些年的iphone X一出现 手机厂商纷纷取消了实体的物理按键，ios取而代之的是底部的一个大横条 安卓这边基本上也有不少虚拟按键的厂商 就会导致一些比较奇葩的问题出现 比如 这种的情况的发生，或者说刘海屏，挖孔屏 一般来说这种时候，都需要我们前端去进行设备适配。 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）的影响，以及横屏状态下他们的影响。 更详
uniapp自定义头部(官方状态栏高度var(--status-bar-height)失效后的处理)
qq_43217258的博客
12-16 1万+
说明：之前都是用uview UI自定义头部，发现现在他的插槽无法解决我的需求后，决定自己写一个，但是遇到了一堆坑，最恶心的是var(–status-bar-height)，获取手机状态栏高度这个属性失效了，没办法自己获取手机状态栏高度去了 代码说明：核心函数是状态栏高度（statusBarHeight）+ 底部高度（48px） 这里安卓是44px，ios是48px，我偷懒没做处理，直接用的48px 效果图： 组件代码： <template> <view class="myHeader"
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
m0_63250938的博客
10-18 2496
uniapp自带可以计算手机设备安全区的代码，使用var(--status-bar-height) ; 便可直接获取
CSS - CSS案例和额外属性补充
老司机的后备箱
05-23 594
writing-mode writing-mode定义了文本水平或垂直排布以及在块级元素中文本的行进方向 属性值 说明 horizontal-tb 文本水平排版，内容从上往下排列 — 默认值 vertical-lr 文本垂直排列，从左往右进行排列 vertical-rl 文本垂直排列，从右往左进行排列 .box { width: 100px; height: 100px; background-color: skyblue; padding: 10px; ma
使用html+css实现-静态开源案例-品优购
SHoadgnaw的博客
03-01 7169
使用html+css实现-静态开源案例-品优购设计目标css制作图标规范seo优化网页标题 titledescription 网站说明 显示在搜索引擎后方的解释Keywords关键词字体图标引入方法注意搭建整个页面时的路径问题html代码首页(index.html)商品列表页(list.html)商品详情页(detail.html)注册页面(register.html)CSS代码通用css(base.css)公用css(common.css)首页css(index.css)商品列表页css(list.css
华为手机获取状态栏高度是错误的_聊聊获取屏幕高度这件事
weixin_31234809的博客
12-30 1266
问题的起因是我发现 PopupWindow弹出位置不正确时发现的。其实早在两年多前，我就发现我手上的小米MIX2s 获取屏幕高度不正确，后面参考V2EX 的这篇帖子处理了。最近又一次做到类似功能，发现小米、vivo都出现了问题。所以有了今天的内容。1.回顾过去说起获取屏幕高度，不知道你是如何理解这个高度范围的？是以应用显示区域高度作为屏幕高度还是手机屏幕的高度。那么我们先看一下平时使用获取高度的方...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配 ...
03-29
安全区域是苹果自iOS 11起引入的概念，旨在确保内容在屏幕边缘圆角、传感器开孔（如iPhone的“刘海”）以及底部小黑条之外的区域显示，避免内容被遮挡。 1. 安全区域的含义： 安全区域是指屏幕中不受物理边框、圆角...
css计算函数 scalc 微信小程序_【报Bug】CSS变量微信小程序不支持计算
weixin_39683163的博客
01-12 366
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]状态栏高度的CSS变量var(--status-bar-height)在微信小程序中通过calc计算不起作用重现步骤[步骤][结果][期望][如果语言难以表述清晰，拍一个视频或截图，有图有真相]IDE运行环境说明[HBuil...
uniapp高度计算
zzh990822的博客
12-16 1757
var(--status-bar-height) //获取状态栏的高度 height: calc(100% - 200rpx - var(--status-bar-height));//通过calc计算属性 获取想要的高度
CSS_IOS适配状态栏和IOS底部安全区域
最新发布
小歪博客
08-30 1499
CSS_IOS适配状态栏和IOS底部安全区域
状态栏高度 && 标题栏高度
Qiqihar的专栏
08-14 816
1.获取状态栏高度： 　　decorView是window中的最顶层view，可以从window中获取到decorView，然后decorView有个getWindowVisibleDisplayFrame方法可以获取到程序显示的区域，包括标题栏，但不包括状态栏。 　　于是，我们就可以算出状态栏的高度了。 java代码： Rect frame = new Rect(); getWindo
uniapp开发的技能点整理
无神的博客
09-22 511
uniapp开发中的一些使用技能点和bug整理。
uni-app 自适应状态栏代码
氏张
06-01 7394
.height { height: var(--status-bar-height); }
刘海屏之全面屏适配攻略
热门推荐
易庞宙的博客
11-04 1万+
                                      刘海屏之全面屏攻略 前言 由于苹果公司的“先进设计”导致各大手机厂商纷纷跟风其设计，导致Android的屏幕适配出现新的刚需——刘海屏的适配。为了简化这些适配操作以及繁琐的判断封装优化出一个工具库：BangScreenToolsMaster 适配方案及原理 适配流程 AndroidP的适配方式： Andro...
H5 CSS适配手机刘海屏高度
zhangxxxq的博客
06-16 2026
标题栏使用css适配刘海屏高度
关于H5页面在iPhoneX适配
weixin_34033624的博客
11-06 1651
​1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下： △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸： △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南...
Android刘海屏适配全解析与解决方案
Android刘海屏适配总结是针对Android系统中由于iPhone X引领的刘海屏设计潮流而进行的一系列UI调整和兼容性的处理。随着越来越多的手机厂商采用刘海屏设计，确保刘海屏设备用户的使用体验变得至关重要。本文将深入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值