CSS中的自定義長(zhǎng)度單位是一種非常有用的工具，它能夠提高我們對(duì)布局的控制力和精度。在默認(rèn)情況下，CSS中的長(zhǎng)度單位只有像素、百分比和em等幾種基本單位。但是這些基本單位在不同的屏幕尺寸和設(shè)備上顯示的效果差別較大，使用自定義長(zhǎng)度單位可以彌補(bǔ)這些差別。

/* 自定義長(zhǎng)度單位 */
/* 引入SCSS變量 */
$unit-1x: 16px; /* 設(shè)計(jì)稿中1x的像素值 */
$unit-2x: 32px; /* 設(shè)計(jì)稿中2x的像素值 */
$unit-3x: 48px; /* 設(shè)計(jì)稿中3x的像素值 */
/* 定義自定義長(zhǎng)度單位 */
$m-unit-1x: ($unit-1x / 16) + rem;
$m-unit-2x: ($unit-2x / 16) + rem;
$m-unit-3x: ($unit-3x / 16) + rem;
/* 使用自定義長(zhǎng)度單位 */
.foo {
font-size: $m-unit-2x; /* 2x字號(hào) */
padding: $m-unit-1x; /* 1x邊距 */
border-radius: $m-unit-3x; /* 3x圓角 */
}

在這段代碼中，我們使用了SCSS預(yù)處理器來(lái)定義自己的長(zhǎng)度單位。首先定義了設(shè)計(jì)稿中1x、2x和3x分別對(duì)應(yīng)的像素值，然后通過(guò)除以16來(lái)轉(zhuǎn)換成rem單位，并加上rem后綴，定義為自定義長(zhǎng)度單位。在樣式中，我們可以直接使用$m-unit-1x、$m-unit-2x、$m-unit-3x來(lái)表示1x、2x、3x對(duì)應(yīng)的長(zhǎng)度值。這樣，在不同屏幕尺寸和設(shè)備上，我們都可以保持一致的布局效果。