如果媒体宽度<x，则更改HTML

Question

如果媒体宽度<700px（或者如果可能，检测设备是否可移动），我想更改我的HTML。有没有更好的方法来做到这一点，而不是：

<element class="one"></element>
<element class="two" style="display:none;"></element>

@media (max-width: 700px) {
    .one {
        display: none;
    }
    .two {
        display: inline;
    }

PS：我正在使用python，如果有一个与模板一起使用的包来执行此操作。

Answer 1

你可以像下面这样使用media CSS： -

@media only screen and (min-width:360px) and (max-width:700px)
{
    .one {
        display: none;
    }
    .two {
        display: inline;
    }
    }

<element class="one"></element>
<element class="two" style="display:none;"></element>

Answer 2

@media (max-width: 700px) {
    .one {
        display: none;
    }
    .two {
        display: block;
    }
}
@media (min-width: 701px) {
  .one {
     display: block;
   }
   .two{
     display: none;
   }
}

<div class="one">ONE</div>
<div class="two">TWO</div>

Answer 3

你可以在Javascript中使用Window.matchMedia。

if (window.matchMedia("(max-width: 700px)").matches) {
  /* Do something */
} else {
  /* Do something else */
}

但我建议使用CSS media queries。