Javascript 调整CSS大小以适应特定的移动屏幕

我正在使用JavaScript动态地调整CSS元素的大小以适应特定的移动屏幕。比如：

var MY_DESIGN_WID = 420;
var MY_ELEMENET_WID = 200;
var actualWid = window.innerWidth;
var id = document.getElementById('myElement');
id.style.width = Math.round(MY_ELEMENET_WID * actualWid / MY_DESIGN_WID) + 'px';

---

我对CSS元素的每一个相关大小都这样做。。。是否有一种“更好”的方法来实现相同的功能？

您可以使用Javascript来实现这一点，但如果您只使用CSS中的@media查询来实现它，那么通过设备将更容易、更受支持

Javascript可以在大多数设备中关闭，CSS也可以在硬件上加速，因此您也会看到性能的轻微提高

    #exampleDiv {
      width: 300px; // Set width 300px
    }

    @media screen and (max-width: 768px){ //Apply conditions if screen width > 768px
      #exampleDiv {width: 500px;} // Change width to 500px
    }

---

我使用媒体查询、屏幕管理，有时还使用JavaScript实现CSS难以实现的某些效果。JavaScript和CSS对硬件图形加速具有相同的访问权限

但这当然很容易通过CSS添加一个根据屏幕大小显示内容的类来解决

例如，您可以找到类似velocity js的库来用javascript制作一些动画

我真的很喜欢使用velocity，这很简单，我们将对此进行记录

---

此外，有时根据元素几何体的某些属性可以再次生成布局，因此从JavaScript制作动画时的性能是平滑动画的关键值，如果这样做，您可能会搜索布局破坏和重新绘制

你为什么要通过javascript来实现它？更好的方法是通过css媒体查询，请参阅：不仅如此，将

%

值或

vw

、

vh

或

vmin

值和媒体查询相结合将解决此问题，并且比使用JS快得多。这取决于元素是什么<代码>宽度：100%通常可以。我想使用

%

很有意义，只是我不确定我是否可以使用分数，例如

左：27.112%

或

宽度：33.333%

。。。我可以吗？