如果媒体宽度<x

Question

如果媒体宽度小于700像素，我想更改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。