如何放大使用CSS实现的半圆仪表盘的尺寸？

解决方案 #

你修改后不生效的原因是仪表盘的所有子元素尺寸、位置参数都是和初始200px宽度的外层容器强绑定的，只改外层宽度无法适配，需要按比例同步调整所有关联的尺寸参数。

如果要实现宽度400px的大尺寸半圆仪表盘，替换为如下CSS即可：

body { background-color:#555888; }
/* 外层容器宽度改为400px，高度同步调整适配 */
.sc-gauge  { width:400px; height:400px; margin:10px auto; }
/* 背景高度同步改为200px，圆角设置为宽度的一半实现半圆效果 */
.sc-background { position:relative; height:200px; margin-bottom:10px; background-color:#fff; border-radius:200px 200px 0 0; overflow:hidden; text-align:center; }
/* 内边距、高度、圆角按2倍比例放大 */
.sc-mask { position:absolute; top:40px; right:40px; left:40px; height:160px; background-color:#555888; border-radius:160px 160px 0 0 }
/* top值、margin-left按2倍比例放大 */
.sc-percentage { position:absolute; top:200px; left:-200%; width:400%; height:400%; margin-left:200px; background-color:#00aeef; }
.sc-percentage { transform:rotate(25deg); transform-origin:top center; }
.sc-min { float:left; }
.sc-max { float:right; }
/* 字体大小同步放大适配大尺寸 */
.sc-value { position:absolute; top:50%; left:0; width:100%;  font-size:72px; font-weight:700 }

HTML代码不需要做任何修改，直接复用原有代码即可生效。如果后续需要调整为其他尺寸，只需要按目标宽度和初始200px的比例，等比缩放所有数值参数即可。

内容的提问来源于stack exchange，提问作者Hello World