根據設計稿，計算出網頁REM的大小，有那麼難嗎？

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心

REM佈局

REM 是一個單位， REM佈局 是以 REM 為基本的一種佈局方式。

REM 中的 R 就是 Root 的意思，它代表了 根標籤 ，所以說 REM 這個單位的大小是根據 根標籤 的 font-size 來決定的，而 根標籤 就是 html

如果 html 的 font-size: 14px ，則整個頁面的 1rem = 14px ，如果 html 的 font-size: 20px ，則整個頁面的 1rem = 20px

設計稿

那如果我現在給你一張設計稿，寬為 800px ，而設計稿中有一個按鈕長寬為 100px、20px ，那麼你將此按鈕繪製到網頁上的時候，應該長寬各是多少 rem 呢？

網頁

設計稿是設計稿，而網頁是網頁，設計稿的寬度是固定的，而網頁的寬度是不固定的，因為不同的電腦的螢幕尺寸是不一樣的，這裡我們先選取一個 1920px 的網頁來舉例子

我們可以把設計稿上的 1px 看成是 1rem ，那麼 1920px 的網頁上 1rem 就是 (1920 / 800 * 1)px

而按鈕在設計稿上是 100px=100rem ，到了網頁上按鈕也是 100rem ，只不過是兩個rem的大小不一樣而已~~

實踐

我們準備三個檔案 index.html、index.css、index.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./index.css" />
</head>
<body>
  <button class="btn">按鈕</button>
</body>
<script src="./index.js"></script>
</html>

index.css

html {
font-size: 1px;
}
.btn {
width: 100rem;
height: 20rem;
}

index.js

// multiple是倍數，預設是1，也可以自定義
const computedFontStyle = (
clientWidth,
designWidth,
multiple = 1) => {
return clientWidth / designWidth * multiple
}

// 每次螢幕寬度改變時，改變html標籤的font-size
window.onresize = () => {
// 獲取html物件
const docEl = document.documentElement
// 獲取網頁寬度
const clientWidth = docEl.clientWidth
// 計算html的font-size
const rootFontStyle = computedFontStyle(clientWidth, 800)
docEl.setAttribute('style', `font-size: ${rootFontStyle}px`)
}

當我們改變螢幕寬度時，html的 font-size 都會實時更改，達到 rem 大小更改的效果，同時改變button的相應高度寬度

結語

我是林三心，一個熱心的前端菜鳥程式設計師。如果你上進，喜歡前端，想學習前端，那我們們可以交朋友，一起摸魚哈哈，摸魚群，加我請備註【思否】

根據設計稿，計算出網頁REM的大小，有那麼難嗎？

前言

REM佈局

設計稿

網頁

實踐

結語

相關文章