it-swarm.com.ru

Как использовать определенные стили CSS в зависимости от размера экрана/устройства

Bootstrap 3 имеет классы CSS в адаптивных утилитах, которые позволяют мне скрывать или показывать некоторые блоки в зависимости от разрешения экрана http://getbootstrap.com/css/#responsive-utilities-classes

У меня есть несколько стилевых правил в файле CSS, которые я хочу применить или нет, основываясь на разрешении экрана.

Как мне это сделать?

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

26
Zelid

Используйте @media запросов . Они служат именно этой цели. Вот пример того, как они работают:

@media (max-width: 800px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
}

Это будет работать только на устройствах, ширина которых равна или меньше 800 пикселей.

Узнайте больше о медиазапросах в Mozilla Developer Network .

55
Ranveer

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

/* for all screens, use 14px font size */
body {  
    font-size: 14px;    
}
/* responsive, form small screens, use 13px font size */
@media (max-width: 479px) {
    body {
        font-size: 13px;
    }
}
4
C.P.O

Я создал небольшой инструмент javascript для стилизации элементов по размеру экрана без использования медиазапросов или перекомпиляции начальной загрузки css:

https://github.com/Heras/Responsive-Breakpoints

Просто добавьте класс responsive-breakpoints к любому элементу, и он автоматически добавит классы xs sm md lg xl к этим элементам.

Демо: https://codepen.io/HerasHackwork/pen/rGGNEK

1
Heras

Почему бы не использовать @ media-query ? Они предназначены именно для этой цели . Вы также можете сделать это с помощью jQuery, но это последнее средство в моей книге.

var s = document.createElement("script");

//Check if viewport is smaller than 768 pixels
if(window.innerWidth < 768) {
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css1";
}else { //Else we have a larger screen
    s.type = "text/javascript";
    s.src = "http://www.example.com/public/assets/css2";
}

$(function(){
    $("head").append(s); //Inject stylesheet
})
0
Michael Koelewijn