Разный контент для разных разрешений

[alastor73]

Приветствую!

Такой вопрос, есть сайт с адаптивный дизайном, нужно встроить туда код виджета от aviasales. Дело в том, что их блоки не адаптивные, и ширина у блоков фиксированная. Я нашел выход, как решить эту проблему. Через css медиа запросы, только не догоняю как это сделать. Я создал несколько блоков разных размеров под каждое разрешение, и нужно показывать именно тот блок, который подходит под разрешение, а остальные скрывать через display: none

 

Подскажите пожалуйста, как это можно сделать?

[li4e]

Так дайте всем блокам классы например       w720, w1280  и т.д. и скрывайте или показывайте нужные!

[alastor73]

Так дайте всем блокам классы например       w720, w1280  и т.д. и скрывайте или показывайте нужные!

 

каким образом?

[afdw]

 

Так дайте всем блокам классы например       w720, w1280  и т.д. и скрывайте или показывайте нужные!

 

каким образом?

 

через @media.

[alastor73]

 

 

Так дайте всем блокам классы например       w720, w1280  и т.д. и скрывайте или показывайте нужные!

 

каким образом?

 

через @media.

 

спасибо КЭП.

 

Я знаю что через медиа. Я не знаю как. Вот есть такая штука, сам сварганил. верная или нет, не знаю:

<style type='text/css'>@media (min-width:1280px ) { .adslot_1 { display: none; } }@media (min-width:1024px; ) { .adslot_2 { display: none;  } }@media (min-width:768px; ) { .adslot_3 { display: none;  } }@media (min-width:600px; ) { .adslot_4 { display: none;  } }@media (min-width:480px; ) { .adslot_5 { display: none;  } }@media (min-width:320px) { .adslot_6 { display: none;  } }</style><div class='adslot_1'>код1</div><div class='adslot_3'>код2</div><div class='adslot_6'>код3</div>

[afdw]

.adslot_1, .adslot_2, .adslot_3 { display: none; }

@media (max-width:1280px and min-width:1024px) { .adslot_1 { display: block; } }

@media (max-width: 768px and min-width: 600px) { .adslot_2 { display: block; } }

@media (max-width: 480px and min-width: 320px) { .adslot_3 { display: block; } }

[alastor73]

.adslot_1, .adslot_2, .adslot_3 { display: none; }@media (max-width:1280px and min-width:1024px) { .adslot_1 { display: block; } }@media (max-width: 768px and min-width: 600px) { .adslot_2 { display: block; } }@media (max-width: 480px and min-width: 320px) { .adslot_3 { display: block; } }

вообще ничего не показывается...

[afdw]

http://jsfiddle.net/71va152u/

[alastor73]

http://jsfiddle.net/71va152u/

вот уже лучше! То что надо! Благодарю!