Блог

Главная - Вопросы по программированию - Как написать CSS только для устройств, ширина экрана которых меньше 300 пикселей, но не для всех?

Как написать CSS только для устройств, ширина экрана которых меньше 300 пикселей, но не для всех?

#css #mobile-safari #mobile-website

#css #mobile-safari #мобильный веб-сайт

Вопрос:

Как написать CSS только для устройств, ширина экрана которых меньше 320 пикселей, но не для всех?

Я хочу написать CSS как

Единственный пример для объяснения вопроса

 devices with min-width of 300 px  { color:red}
devices with max-width of 299 px  { color:blue}

И как управлять ландшафтным режимом в обоих условиях?

Ответ №1:

 myselector { color: blue; }
@media screen and (min-width: 300px) {
  myselector {
    color: red;  
  }
}

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

Ответ №2:

Есть замечательная статья, которая может объяснить это намного лучше, чем я могу здесь:

http://www.alistapart.com/articles/responsive-web-design/

Ответ №3:

Я обнаружил, что этот код не очень надежен на полнофункциональных телефонах и некоторых blackberry. В этом случае я использую Device Atlas, чтобы получить ширину на стороне сервера.

 @media only screen and (max-width: 299px) {
  color:blue;
}


@media only screen and (min-device-width: 300px) {
  color:red;
}

Комментарии:

1. но я думаю, что в старом браузере media screen не будет работать, они поддерживают handheld

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

Ответ №4:

Он не так известен, как screen and (максимальная ширина: или минимальная ширина), но медиа-запросы CSS3 также позволяют применять css в зависимости от вашего устройства ориентации.

Пример кода

@экран мультимедиа и (ориентация: книжная) {

 /* Portrait styles */

}

@экран мультимедиа и (ориентация: альбомная) {

 /* Landscape styles */

}

Смотрите там спецификацию: http://www.w3.org/TR/css3-mediaqueries/#orientation

Ответ №5:

Вы могли бы сделать это с помощью javascript.

 if (document.clientWidth < 300) {
 document.getElementById("yourElement").style.color="blue");
} else if (document.clientWidth >= 300) {
 document.getElementById("yourElement").style.color="red");
}

Или что-то в этом роде.

Вероятно, вы могли бы также найти способ включить другую таблицу стилей, если она меньше определенной ширины в пикселях. Я не совсем уверен, как изменить <head> с помощью JS, поэтому вам придется подождать другого ответа или немного поискать в Google.