javascript - 使 CSS 大小适应特定的移动屏幕

Question

我正在使用 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 元素的每个相关尺寸执行此操作...难道没有一种“更好”的方法来实现相同的功能吗？

Answer 1

您可以使用 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
    }