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

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 
} 
}); 

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

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

Любая помощь очень ценится.

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 лучшим способом с точки зрения производительности мобильных устройств?

UPDATE: Собираюсь использовать 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.

Если вы не хотите использовать библиотеку, то this post on reacting to media queries in JavaScript будет выполнять то, что вам нужно, с помощью ванильного JavaScript.

Вот jsFiddle Demo с некоторым рабочим примером кода, и вот Fullscreen jsFiddle Demo, что удобно при попытке проверить, как это работает. Если вы используете полноэкранную версию и сделаете окно браузера менее 600px, предупреждение javascript скажет вам, что вы это сделали. Поскольку появляется предупреждение, браузер вернется к исходному размеру и скажет, что он снова стал больше 600px. Таким образом, вы можете видеть, что она вызывает функцию соответствия, когда она совпадает (так во время загрузки и во время изменения размера до большей ширины), и вызывает функцию 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"); 
    } 
});