Можно ли встроить правила CSS @media? - PullRequest
Новая
       11

Можно ли встроить правила CSS @media?

240 голосов
/ 21 марта 2012

Мне нужно динамически загружать изображения баннеров в приложение HTML5 и хотелось бы, чтобы несколько разных версий соответствовали ширине экрана. Я не могу правильно определить ширину экрана телефона, поэтому я могу думать только о том, чтобы добавить фоновые изображения div и использовать @media, чтобы определить ширину экрана и отобразить правильное изображение.

Например: 

 <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span>

Возможно ли это, или у кого-нибудь есть другие предложения?

Ответы [ 12 ]

0 голосов
/ 20 июня 2019

да, вы можете сделать с помощью javascript window.matchMedia

  1. рабочий стол для текста красного цвета

  2. планшет для текста зеленого цвета

  3. мобильный телефон для текста синего цвета 

//isat_style_media_query_for_desktop_mobile_tablets
var tablets = window.matchMedia("(max-width:  768px)");//for tablet devices
var mobiles = window.matchMedia("(max-width: 480px)");//for mobile devices
var desktops = window.matchMedia("(min-width: 992px)");//for desktop devices



isat_find_device_tablets(tablets);//apply style for tablets
isat_find_device_mobile(mobiles);//apply style for mobiles
isat_find_device_desktops(desktops);//apply style for desktops
// isat_find_device_desktops(desktops,tablets,mobiles);// Call listener function at run time
tablets.addListener(isat_find_device_tablets);//listen untill detect tablet screen size
desktops.addListener(isat_find_device_desktops);//listen untill detect desktop screen size
mobiles.addListener(isat_find_device_mobile);//listen untill detect mobile devices
// desktops.addListener(isat_find_device_desktops);

 // Attach listener function on state changes

function isat_find_device_mobile(mob)
{
  
// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="blue";

// isat mobile style here

}

function isat_find_device_desktops(des)
{

// isat mobile style here

var daynight=document.getElementById("daynight");
daynight.style.color="red";
 
//  isat mobile style here
}

function isat_find_device_tablets(tab)
{

// isat mobile style here
var daynight=document.getElementById("daynight");
daynight.style.color="green";

//  isat mobile style here
}


//isat_style_media_query_for_desktop_mobile_tablets
    <div id="daynight">tricky style for mobile,desktop and tablet</div>
0 голосов
/ 03 мая 2015

если добавить правило в файл print.css, вам не нужно использовать @ media.

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

<script type='text/javascript'>
  document.styleSheets[3].insertRule(" #caldiv_<?smarty $item.calendar_id ?> { border-color:<?smarty $item.color ?> }", 1);
</script>
Страница:
...