一个神奇的svh：解决iOS saferi高度问题
100svh 是专门为了解决 iOS Safari 这个经典问题而引入的。让我详细解释一下为什么它这么神奇： 为什么 100svh 有效？ iOS Safari 视口单位的演变： 100vh - 大视口高度 包含地址栏和工具栏 当滚动时工具栏隐藏，但高度不变 导致底部内容被遮挡 100svh - 小视口高度 始终是可见区域的高度（不包含工具栏） 工具栏显示/隐藏时，这个值保持一致 完美解决内容被底部栏遮挡的问题 100dvh - 动态视口高度 动态变化，随工具栏显示/隐藏而变化 可能导致页面跳动 100lvh - 大视口高度 与 ...
h5吹气互动(利用recorderjs获取输入音量大小)
h5吹气互动原理是利用获取麦克风音量，用一段逻辑来判断。研究了半天~ 最开始用的是下面这种方法（在ios下失效）： <!doctype html> <html style="font-size: calc((100vw / 375)*10)"> <head> <meta charset="utf-8" ></meta> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <title>Disney Spring Web - voice！</title> <script src="./recorder.mp3.min.js">&...
如何用一行 CSS 分别实现 10 种现代布局？
前言 更新于 2020/7/12，和 Una Kravets 邮件确认了下，最近她在 web.dev 也发布了新的关于视频里面布局的 blog，有兴趣的可以前去一观 one line layouts 周日在家看 web.dev 的 2020 三天 live，发现不少有意思的东西，其中有一项是关于 CSS 的，主播是 Una Kravets（chrome team 成员）。虽然我已经好几个月没有深入研究 CSS 的东西了，不过以前的底子还在（有兴趣的可以看我一年前发布的关于 CSS 的东西，虽然由于太过底层没啥人愿意看, sad）。 注意：下面大部分代码已经由各大主流最新浏览器实现，...