Выключаете и включаете сценарии на основе медиазапросов?

Question

Я использую виджет в своем макете, и теперь он у меня есть, поэтому при достижении определенной точки останова он не будет отображать этот виджет большего размера, а затем перейдет к меньшему. Большой виджет скрывается, а меньший виден, но текст, связанный с обоими, неверен.

Текст для большого виджета отображается, а текст меньшего размера для маленького виджета - нет. Я уверен, что это связано со сценариями, которые каждый использует. Дисплей ни один не скрывает элементы, но сценарии, кажется, все еще работают.

Я пока не имею понятия о JavaScript и предпочел бы ответ HTML или CSS, если это возможно. Если нет, то я пойду с JS, но мне понадобится направление, пожалуйста. Я прочитал множество статей и даже в процессе изучения JS, но все еще не уверен, как применимо кое-что из того, что я прочитал.

@media all and (max-width: 900px) {
  // styles
}

if (document.documentElement.clientWidth < 900) {
  // scripts
}

Я обнаружил, что это то, что мне нужно, но я не уверен в синтаксисе, как вызвать нужный мне сценарий. Я просто поместил сам сценарий туда без какой-либо другой информации? Я также читал об использовании jquery, чтобы сделать это с чем-то вроде этого

$(window).resize(function() {
if ($(this).width() > 480) {
  // call supersize method
}
});

И я даже читал об использовании Modernizer для этого, но мне все еще нужно просмотреть документацию.

В мусорном ведре он вообще не показывает никакого текста, но большой текст находится рядом с небольшим виджетом. Мне просто нужно отключить этот большой скрипт и включить другой по определенному медиа-запросу.

Любая помощь с благодарностью.

HTML

  <aside class="smallScreen">
      <div class="smallWeather" style='width: 200px; height: 440px; background-image:
  url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
  ); background-repeat: no-repeat; background-color: #993333;' ><div 
  id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>  
  </div></div></aside>
  </div></div></div></aside>


  <aside class="largeScreen">
      <div class="largeWeather" style='width: 500px; height: 440px; background-image:
  url(http://vortex.accuweather.com/adcbin/netweather_v2/backgrounds/red_500x440_bg.jpg
  ); background-repeat: no-repeat; background-color: #993333;' ><div 
  id='NetweatherContainer' style='height: 420px;' ><script src='http://...'></script>  
  </div></div></aside> 

CSS

  @media screen and (min-width: 564px) and (max-width: 604px) {
  .largeScreen {
display: none;
}

  .smallScreen {
display: block; 
width: 55%;
min-width: 240px;
height: 100%;
font-size: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 1.2rem;
}

  .smallWeather {
position: relative;
display: block;
width: 240px;
height: 420px;  
background: white;
margin-left: auto;
margin-right: auto;
}

Каков наилучший способ сделать это и почему, пожалуйста? Является ли jQuery лучшим способом с точки зрения производительности мобильных устройств?

ОБНОВЛЕНИЕ: Собираюсь использовать enquire.js из-за его простого подхода (хотя я все еще немного поверхностен в его использовании) и из-за его малости.

Это основной код:

enquire.register("screen and (max-width: 605px)", {

// OPTIONAL
// If supplied, triggered when a media query matches.
match : function() {},      

// OPTIONAL
// If supplied, triggered when the media query transitions 
// *from a matched state to an unmatched state*.
unmatch : function() {},    

// OPTIONAL
// If supplied, triggered once, when the handler is registered.
setup : function() {},    

// OPTIONAL, defaults to false
// If set to true, defers execution of the setup function 
// until the first time the media query is matched
deferSetup : true,

// OPTIONAL
// If supplied, triggered when handler is unregistered. 
// Place cleanup code here
destroy : function() {}

});

По-прежнему не сделано и ищет дополнительную поддержку с этим. Теперь, когда я выбрал этот маршрут, я вижу, что уже довольно много статей и вопросов о enquire.js. Я буду обновлять мою ситуацию, как я читаю.

ОБНОВЛЕНИЕ: Это то, где я нахожусь, но это еще не работает. У меня есть стили, связанные с каждым скриптом, все еще в HTML, и отображать ни один из них не используется соответственно. Будет ли выполнять эту работу, как только я получу правильный enquire.js?

Вот новый jsbin

Еще раз спасибо за все!

Answer 1

Я думаю, что вы ищете что-то вроде enquire.js, которая представляет собой облегченную библиотеку JavaScript для ответа на медиа-запросы CSS.

Если вы не хотите использовать библиотеку, этот пост о реакции на медиа-запросы в JavaScript проходит через способ сделать то, что вам нужно, с помощью ванильного JavaScript.

Вот демонстрация jsFiddle с некоторым рабочим примером кода, а также демонстрация полноэкранного jsFiddle, которая удобна при попытке проверить, как она работает. Если вы используете полноэкранную версию и окно браузера меньше 600px Широкий, предупреждение JavaScript скажет вам, что вы сделали это. Поскольку появляется предупреждение, браузер вернется к исходному размеру и сообщит вам, что оно больше 600px снова. Итак, вы можете видеть, что он вызывает функцию match, когда она совпадает (например, во время загрузки и во время изменения размера на большую ширину), и она вызывает функцию unmatch при изменении размера на меньшую ширину, потому что тогда медиа-запрос больше не соответствует Именно так вы вызываете определенную функцию только для мобильных устройств или только для настольных компьютеров в зависимости от размера экрана.

JS

enquire.register("screen and (min-width:600px)", {
    match: function () {
        alert("Now the screen width is more than 600px");
    },
    unmatch: function () {
        alert("Now the screen width is less than 600px");
    }
});