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元素的每个相关大小做这个...不是＆＃34;更好＆＃34;如何实现相同的功能？

Answer 1

您可以使用Javascript来实现这一点，但如果您只是使用@media查询在CSS中执行此操作，那么通过设备会更容易和更多支持。

大多数设备都可以关闭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
    }

Answer 2

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

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

你可以在javascript中找到像velocity js这样的库来做一些动画，例如

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

我真的很喜欢玩速度很简单，我们会记录下来。

有时候，访问某个元素几何体的某些属性可以再次制作一个布局，以便在动画来自JavaScript的东西时获得平滑动画的关键值，如果你这样做，你可以搜索布局垃圾并重新绘制。

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

2 个答案: