汕头建站模板厂家,wordpress播客插件,朝阳seo推广,天津网站排名优化费用最近的一个项目中#xff0c;对于 CSS 的一些属性一些选择符可以大胆使用#xff0c;然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。
Component style{{height: calc(100vh - 46px)}}一个组件/Component
这样的一段代码很简单#xff…最近的一个项目中对于 CSS 的一些属性一些选择符可以大胆使用然后很意外得撞上一个 iOS 中 Safari 的一个解析问题。
Component style{{height: calc(100vh - 46px)}}一个组件/Component
这样的一段代码很简单然而就是这样的一段简单的代码在 iOS 中出现了让误以为不兼容 [style*100vh - 46px] 这个写法。
为什么说是误以为呢因为当时有一个需要是要在移动端中去改变这个组件的高度所以我就想着为什么不用属性选择符来快速实现呢这样还可以不用去考虑写类名。于是我就写了这么一句 CSS。
[style*100vh - 46px] {height: calc(100vh - 100px) !important;
}
在 Chrome 里模拟移动端看看嗯很 OK 么高度改变了。
然而也就只是高兴了一下就在 iOS 中发现高度并没有改变。十分好奇通过数据线接上手机打开 Safari进入开发者菜单找到 iPhone 选项开始调试 iPhone 上的打开的这个页面。 ⇧⌘C开始选择元素然后在 iPhone 上点一下那个组件元素快速定位到对应的元素上。然后在 DOM 中发现了一个很神奇现象。原本应该是 100vh - 46px 的属性值变成了 -46px 100vh 了。所以也就是为什么我的 CSS 没有作用的原因了。 就因为这个原因我刚开始都怀疑是不是 * 这个属性选择符的规则还存在兼容问题或者是中间的 - 减号需要转义之类的。没想到啊没想到居然还会有这样的一个情况出现。
最后为了考虑两者兼容于是只好暂时委曲求全一下写成这样了。
[style*100vh - 46px],
[style*-46px 100vh] {height: calc(100vh - 100px) !important;
}
现在想想啊还不如直接写一个 className 来的实在何必折腾呢。但不折腾一下自己也不知道居然还会有这样一个情况存在。
技术前沿拓展
前端开发你的认知不能仅局限于技术内需要发散思维了解技术圈的前沿知识。细心的人会发现开发内部工具的过程中大量的页面、场景、组件等在不断重复这种重复造轮子的工作浪费工程师的大量时间。
介绍一款程序员都应该知道的软件JNPF很多人都尝试用过它它是功能的集大成者任何信息化系统都可以基于它开发出来。
这是一个基于 Java Boot/.Net Core 构建的简单、跨平台快速开发框架。前后端封装了上千个常用类方便扩展集成了代码生成器支持前后端业务代码生成实现快速开发提升工作效率框架集成了表单、报表、图表、大屏等各种常用的 Demo 方便直接使用后端框架支持 Vue2、Vue3。如果你有闲暇时间可以做个知识拓展。
看完本文如果觉得有用记得点个赞支持收藏起来说不定哪天就用上啦
