根据特定的移动屏幕调整CSS大小

Adapt CSS sizes to specific mobile screen

本文关键字：屏幕 调整 CSS 大小 移动      更新时间：2023-09-26

我使用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
    }

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

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

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

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

我真的很喜欢用速度打球，这很简单，我们会记录下来的。

此外，有时访问元素几何体的某些属性可以再次创建布局，因此从JavaScript设置动画时的性能是平滑动画的关键值，如果你这样做，你可能会搜索布局破坏和重新绘制。

相关文章：