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

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

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

Как я могу это сделать?

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

Ответ 1

Используйте @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.

Ответ 2

Обнаружение происходит автоматически. Вы должны указать, какой 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;
    }
}

Ответ 3

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

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

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

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

Ответ 4

Почему бы не использовать @media-queries? Они предназначены для этой цели. Вы также можете сделать это с помощью 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
})

Ответ 5

Запросы @media служат этой цели. Вот пример:

@media only screen and (max-width: 991px) and (min-width: 769px){
 /* CSS that should be displayed if width is equal to or less than 991px and larger 
  than 768px goes here */
}

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