所以我试图围绕一个小问题扭曲我的想法，我希望周围有一个聪明的头脑。
我生成了七（7）个圆圈，它们从最大值为100的PHP变量中获取宽度和高度值，然后使用内联CSS（以像素为单位）设置这些值。
不幸的是，一个100像素的圆圈在桌面版本上太小了（或者我应该说媒体查询从大约1200px开始）。所以我使用CSS中的calc（）将输入乘以4。
另一方面，400px的圆圈对于移动设备而言太大了，所以我只想将输入乘以2，但是内联CSS，PHP变量和媒体查询的组合是不行的，因为据我所知。
所以我正在寻找一个解决方案，我可以根据媒体查询更改变量编号I乘以宽度和高度。
一种感觉像黑客的解决方案是设备检测。有了它，我可以运行if / else并执行此操作。我一直在考虑的另一个解决方案是，我可以创建圆圈百分比而不是像素，然后在媒体查询中将max-width和max-height设置为不同的值，但是当我尝试时我遇到圆圈问题缩放浏览器窗口时的椭圆形状。最好的解决方案是根据屏幕大小更改它所乘的变量。这是一份JS工作吗？或者我可以动态生成SVG。
目前设备检测解决方案存在的问题基本上是，如果我在桌面计算机上调整浏览器窗口的大小，它仍会乘以4，这样我的圆圈定位看起来就像一团糟。
这构成了我的圈子结构。其中有7个和一个容器。关键是我乘以（4）的值。可以根据媒体查询进行更改吗？
<div class="circle-1" style="
width: calc(<?php echo $my_variable; ?>px * 4);
height: calc(<?php echo $my_variable; ?>px * 4);">
</div>