Есть ли способ сделать CSS-правила только для рабочего стола?

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

Ответ 1

Отзывчивый веб-дизайн с использованием медиа-запросов

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}

Ответ 2

Разрыв между мобильными и настольными устройствами становится все ближе и ближе - учитывайте, например, планшеты или новые гибридные устройства.

Как указывает Аарон, вы можете определить разные правила на экране устройства (минимальная ширина или максимальная ширина). Например:

@media screen and (min-width: 800px) {
    // this css will only be used when the screen size is min 800px
}

Другими критериями, которые вы, возможно, захотите использовать, являются устройства с таргетингом на основе возможностей их экрана:

Медиа-запросы сенсорного экрана

Ответ 3

Я пробовал решения выше, но они не работали для iPad в ландшафтном режиме. Пейзаж iPad составляет 1024 пикселя. Итак, я решил:

@media only screen and (min-width: 1025px) {
        .myClass {
            /*...your desktop-only style...*/
        }
    }

Ответ 4

Поместите CSS на страницу PHP, которая обнаруживает браузер/устройство из переменных окружения и обслуживает правильную версию CSS.