使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实现此目的，但是如果仅使用@media查询在CSS中进行操作，它将通过设备更容易获得更多支持。

可以在大多数设备中关闭Java脚本，并且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
    }

Answer 2

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

但这当然很容易解决，因为CSS添加了一个根据屏幕大小显示内容的类。

您可以找到诸如Velocity js之类的库来在javascript中做一些动画，例如

http://julian.com/research/velocity/

我真的很喜欢简单地玩速度游戏，我们将对其进行记录。

同样，有时访问元素几何的某些属性可以再次进行布局，因此从JavaScript进行动画处理时的性能对于平滑动画而言是关键的值，如果您这样做，则可以搜索布局垃圾并重新绘制。