最近在開發項目時發現，在移動端input里面的placeholder字體偏下，但PC端卻是垂直居中，而兩者的代碼幾乎相同，只是字體大小有差異，查詢發現原來就是它惹的禍。
原因：
輸入的文字font-size大於placeholder的font-size。
當時我的代碼中PC端與移動端的font-size均為默認值：16px，而PC端的placeholder的font-size為18px，移動端的placeholder的font-size為12px。
解決辦法：
① 利用css選擇器:placeholder-shown，該選擇器會匹配當前無輸入值的輸入框（但必須設置placeholder），當輸入框沒有輸入值時，我們可以把輸入框的字體大小調整至小於或等於placeholder字體大小的狀態，這樣就解決字體偏下的問題啦。
示例代碼：
:placeholder-shown{
font-size:12px;
}
② 當然也可以直接在::placeholder偽元素中使用translateY調整文字上下位置。
&::placeholder{
transform: translateY(-5px);
}