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