Open yinkaihui opened 6 years ago
从Chrome源码看浏览器如何加载资源 有时间可以研究下,不一定要看源码
提供适配 iphoneX 的方法。概括来讲:
为了避免 iphoneX 的刘海和底部出现空白,苹果已经把 viewport-fit 增加到了 CSS Round Display 规范中。通过设置 viewport-fit 的值让 viewport 填充满整个屏幕。
<meta name='viewport' content='initial-scale=1, viewport-fit=cover’>
实际上 viewport-fit 目前只在 iOS 11+ 上支持,所以如果直接在 meta 中添加浏览器会出现讨厌的 The key "viewport-fit" is not recognized and ignored.
警告。可以参考这个 issue 使用 js 添加。
为了避免填充满屏幕后页面内容被刘海底部挡住,使用 env
函数设置 padding 值。
.post {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
env
也是苹果添加的一种方法,并向 CSS 工作组提出了标准化的建议。他们引入了 User Agent properties 的概念,用来在 css 中使用用户代理提供的变量,比如 safe-area-inset-left
等,参考 [css-variables] User Agent properties and variables #1693。
注意一开始苹果提出的是 constant 方法,最后 CSS 工作组讨论后变更为 env 方法,所以在 IOS 11 中,仅支持 constant,而在 iOS 11.2+ 中移除了 constant,替换为 env
env 支持使用 calc() 方法进行计算
.post {
padding-left: calc(env(safe-area-inset-left) + 12px);
}
-谈谈我对函数式编程的理解 里面附带了月影《如何写“好” JavaScript》的ppt。 文章和ppt的干货都挺多的。文章里举了几个常见的高阶函数在实际应用的例子,节流,连击,执行一次。函数式编程实际上就是很多个高阶函数组装完成了一个复杂的功能。周末我得在看看,还没看完 = . =
-Vue项目架构设计与实践 从0~1搭建一个前后端分离的vue项目详细过程