我有一個 UI 元素，它被設計為在 '200px' 寬度下作業得最好。但是如果 UI 的大小需要根據視窗/媒體大小而改變，那么不得不一點一點地調整這個 Component 并將寬度從200px.
通過使用transform: scale(x)調整到視窗/媒體大小來更改組件的大小是一種可接受的做法嗎？它的性能成本高嗎？實際上，視窗/媒體大小將從一開始就設定，因此縮放功能只需運行一次。
if (screen width < 600px) {
element.style.transform = "scale(.7)"
} else {
element.style.transform = "scale(1)"
}
uj5u.com熱心網友回復：
-
transform: scale(x) 是一個代價高昂的操作嗎？
不，轉換操作不需要 DOM 更新。瀏覽器進行渲染更新。它的優點是性能成本低，運行速度快。它的缺點是縮放可能會大大降低其視覺質量（例如，模糊影像），縮小后的組件及其內容可能難以使用或閱讀。
使用 JS 來設定 CSS 絕對是一種代價高昂的更改方式。最有效的方法是僅使用 CSS（媒體查詢）。
為小螢屏“縮放”組件看起來很奇怪。現在解決它的常用方法是制作回應式布局。但是想想，你不需要讓它的內容在里面是動態的。這樣的任務可以用 CSS 來解決。再向前邁出一步。在 CSS 中將內部內容與外部大小聯系起來 - 使用
em/rem單位而不是px所有度量。媒體查詢只會改變它的基礎font-size。不同的大小，沒有潛在的縮放可視化問題，相同的內容位置。:)CSS 可能如下所示。抱歉，用最少的 HTML、CSS、JS 來演示這個概念。要在此代碼段中檢查不同螢屏尺寸的 JS - 更改螢屏尺寸，請重繪 代碼段。CSS 選項無需重繪 即可作業。
function setSizeJs() {
const element = document.getElementById('target-element-px');
element.style.transform = window.innerWidth < 600 ? 'scale(.7)' : 'scale(1)';
}.parent {
font-size: 14px;
}
#target-element-px {
/* original width */
width: 200px;
/* colorize element to show its size */
background-color: green;
}
#target-element-em {
/* main style, will be applied always */
/* an equivalent of 'width 200px' in EMs, where EM is taken as '14px' from the 'parent' class */
width: 14.28571428571429em;
background-color: grey;
}
@media screen and (max-width: 600px) {
/* additional style, will be applied only when the screen size will be less than 600px */
/* it will overwrite the main style */
#target-element-em {
font-size: 0.7em;
}
}<div class="parent">
<div id="target-element-px" class="target-element" onload="setSizeJs">
Some content for original 200px width
</div>
<div id="target-element-em" class="target-element">
Some content for original 200px width
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/338729.html
標籤：javascript html css 用户界面 前端
上一篇：僅在單元測驗中可用的方法
下一篇：合并串列和串列中的元組