Question

我从javascript代码创建我的所有html / css：

var el = document.createElement('div');
el.setAttribute('id', 'fooBar');
el.style.width = "30%";
document.getElementById('body').appendChild(el);

一切正常，但现在我想在该代码中添加@media标签。整个html/css代码附加到body元素，因此最好不要使用id或类。

我发现这样做的唯一解决方案是：

document.querySelector('style').textContent += 
    "@media screen and (max-width: 1280px) { fooBar { font-size: 11px; }}";

但它很糟糕，因为它与外部风格混淆，我更喜欢在本地做这件事。此外，它似乎不适用于动态创建的样式，如宽度或高度。

如何解决这个问题？

Answer 1

您只需检查屏幕尺寸即可然后根据屏幕尺寸应用样式。
可能还需要将其挂钩到屏幕调整大小事件。

function sizeStyle() {
  if (screen.width >= 900) {
    [your javascript styles here]
  } else if (screen.width >= 600) {
    [other javascript style]
  }
}

window.onresize = function(event) {
  sizeStyle();
}; //resizing the window

sizeStyle(); //(before dom?) initial call

将@media标签动态绑定到元素

1 个答案: