最近一年很多客户要求更换主题色，而团队的项目基础框架不一，因此几乎使用了所有的更换主题的方案。以下总结了各方案的实现以及优缺点，希望能帮助有需要更换主题色的伙伴少踩坑。 方案一：硬编码 对一些老的前端

一篇文章，让你远离移动端软键盘疑难杂症。"踩坑人"带你远离软键盘之坑，从避坑（软键盘问题）到填坑（如何解决）

最近一段时间在做 H5 聊天项目，踩过其中一大坑：输入框获取焦点，软键盘弹起，要求输入框吸附（或顶）在输入法框上。需求很明确，看似很简单，其实不然。从实验过一些机型上看，发现主要存在以下问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 web…

写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题，最典型的就是输入框被软键盘遮挡、fixed元素失效等问题，并且这些问题在iOS上的表现让人难以接受。

容器的高度需要设置为100vh，发现在ios(safari)浏览器显示的时候，浏览器的底部工具栏总是会挡住底下的一部分。

如果有一个文本和一个按钮，我们想让文本粘在上面，而按钮粘在下面！使用CSS Flex 似乎很容易做到。 在真机检查一下效果： 酷! Git add, git commit, git push, oh

CSS变量（官方称为自定义属性）是用户定义的值，它可以在你的代码库中设置一次并多次使用。它们使管理颜色、字体、大小和动画值变得更加容易，并确保整个web应用的一致性。

vertical-align，写过 CSS 的朋友们肯定都知道这个属性的作用，顾名思义，垂直对齐，主要目的用于将相邻的文本与元素对齐。MDN 中对它的定义如下： 一种简单的 CSS 属性，用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。 …

1. 单行文本占据的高度 2. 图片下面的空隙 3. 图文对齐问题 4. 矩形块对齐异常 上例中，vertical-align:1.5时，标题和文字显示正常；其他两个值时，标题和文字却挤在了一起。 分析：继承的差别，line-height为数值时，所有子元素继承的都是这个值；而…