一、CSS改變輸入框光標顏色的原生屬性caret-color
CSS caret-color屬性可以改變輸入框插入光標的顏色，同時又不改變輸入框里面的內容的顏色。
例如：
input {
color: #333;
caret-color: red;
}
結果光標顏色變成紅色，文字還是深黑色：
眼見為實，您可以狠狠的點擊這里：CSS caret-color改變光標顏色demo
//zxx: 單詞caret表示“插入符號”，指處於內容可插入狀態的光標。
caret-color屬性不僅對於原生的輸入表單控件有效，設置contenteditable的普通HTML標簽也適用。
例如：
[contenteditable="true"] {
width: 120px;
border: 1px solid #ddd;
padding: 3px;
line-height: 20px;
color: #333;
caret-color: red;
}
<div contenteditable="true">文字</div>
效果如下圖：
兼容性
caret-color屬性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE瀏覽器則還需要等待一些時日。
具體兼容性數據見下截圖：
下面問題來了，對於這些不兼容的瀏覽器，有沒有什么其他辦法可以讓他們也能實現插入狀態光標的變色效果呢？
二、其他方法改變輸入框的閃爍的光標顏色
對於IE瀏覽器，其光標顏色看上去是永遠固定的黑色，並不跟隨輸入框的顏色color變化，因此對於IE瀏覽器，是沒有什么好方法的。
但是，對於Safari瀏覽器，由於輸入框控件的閃爍光標顏色是和設置的color屬性顏色一致，因此我們是有手段可以對光標進行控制的。
具體實現代碼如下：
input {
color: red;
}
input::first-line {
color: #333;
}
於是效果即達成。
您可以狠狠地點擊這里：借助::first-line改變插入光標顏色demo
Safari瀏覽器下截圖效果如下：
借助::first-line偽元素的方法在Chrome，Safari瀏覽器下表現良好，但是Firefox瀏覽器並不支持，其表現為<input>輸入框里面的內容不屬於::first-line，因此，整個輸入框文字都是紅色。
對於不支持::first-line方法的瀏覽器，相關CSS會污染正常的樣式表現，因此我們需要區分處理，例如可以這樣：
input, input::first-line {
color: #333;
}
@supports (-webkit-mask: none) {
input { color: red; }
}
然而這種方法也有局限性，對於<textarea>這種多行輸入控件就無能為力，因為::first-line只能控制首行元素顏色。
三、兩種實現方法綜合
綜合上面兩種方法，可以得到最佳實踐如下：
如果瀏覽器支持caret-color屬性，優先使用caret-color（Chrome/Firefox/Opera）；其次使用::first-line方法（Safari）；最后忽略（如IE）。
整合后CSS如下：
input {
color: #333;
caret-color: red;
}
@supports (-webkit-mask: none) and (not (cater-color: red)) {
input { color: red; }
input::first-line { color: #333; }
}
效果如下截圖（Firefox截圖）：
您可以狠狠的點擊這里：caret-color加first-line改變輸入光標顏色demo
rem 布局不再使用 JavaScript 設置
這里不探討 rem 的原理以及細節，還不熟悉的童鞋建議去惡補一下。
需求
有時候，移動端用
rem布局時候，根據不同的屏幕寬度要設置不同的font-size來做到適配，要寫一坨JS來設置，能不能不用JS呢？
例如：以 750px 設計稿作為基准，根節點設置 font-size 為 100px ,只考慮 DPR 為 2 的情況，只考慮最簡單的情況
document.querySelector('html').style.fontSize = `${window.innerWidth / 7.5 }px`;
代碼
現在移動端 css3 單位 vw ,wh 兼容性已經很不錯了，在不需要兼容太低版本的安卓機情況下可以這樣來：
html{
font-size: 100vw / 7.5
}