canvas無法使用rem單位的解決方案

2021-07-24 08:38:37 字數 691 閱讀 6360

我們在使用canvas時需要設定畫布的大小，即設定canvas標籤的width，height屬性。

width="200px"


height="200px">


canvas>
在移動端，畫布的大小要根據螢幕的大小進行適配，我們一般採用rem結合**查詢的方式。使用canvas時就遇到遇到一些問題：

width="2.5rem"


height="2.5rem">


canvas>
適配螢幕是必須的，但如何解決？用最原始的百分比布局就可以：

//獲取螢幕的寬度


var clientwidth = document.documentelement.clientwidth;


//根據設計圖中的canvas畫布的佔比進行設定


var canvaswidth = math.floor(clientwidth*200/720);


canvas.setattribute('width',canvaswidth+'px');


canvas.setattribute('height',canvaswidth+'px');


//translate方法也可以直接傳入畫素點座標
最後順便放上寫好的demo：

如何使用rem單位

最近搞移動端，真是被rem em與px的換算要了老命了，看了不少文件，似乎弄明白了，這不今天用又矇圈了。好多文件上老是說用rem就給html設定font size，用em就給body設定font size 看了下bootstrap樣式表，html body 其他樣式略哈，就講這兩個主要的。可惜大姐長...

如何使用新單位rem

手機端需加上第一條，pc無視 1 需要先加上 手機端獲取物理裝置尺寸 1 2 viewport content width device width,minimum scale 1,maximum scale 5,user scalable no 獲取手機端物理裝置尺寸 2 先初始化頁面預設的字型大...

rem單位使用法

css3的出現，他同時引進了一些新的單位，包括我們今天所說的rem。在w3c官網上是這樣描述rem的 font size of the root element 下面我們就一起來詳細的了解rem。前面說了 em 是相對於其父元素來設定字型大小的，這樣就會存在乙個問題，進行任何元素設定，都有可能需要知...