Использование медиа-запросов в CSS для iPad

#ipad #css #mobile-safari #media-queries

#iPad #css #мобильный-safari #медиа-запросы

Вопрос:

Допустим, у меня есть существующий CSS для рабочего стола (desktop.css). Я хочу включить CSS для iPad Safari.

В desktop.css, можем ли мы просто выполнить условный импорт в конце..

 @media only screen and (device-width : 768px) 
{  
@import "ipad.css"
}

В ipad.css у нас будут только стили, соответствующие iPad..
/* Стили iPad */

т.е. если это пользователь iPad, ipad.css будет импортирован, иначе он будет проигнорирован.

Каков наилучший подход?

1. Если вы говорите «широкоэкранный носитель с разрешением 768 пикселей», тогда создавайте дизайн для «широкоэкранного носителя с разрешением 768 пикселей», а не для «iPad».

Ответ №1:

В desktop.css, можем ли мы просто выполнить условный импорт в конце..

На самом деле, нет, @import s должны предшествовать любым другим объявлениям стиля.

Но в вашем случае, если вы импортируете свои стили iPad в начале, они, вероятно, все будут переопределены вашими стилями рабочего стола. Поэтому вам лучше использовать другой <link> элемент с этим медиа-запросом и указывать на свой ipad.css вместо этого:

 <link rel="stylesheet" media="only screen and (device-width: 768px)" href="ipad.css">

1. @BoltClock — Почему вы используете проверку фиксированной ширины? Размеры iPad могут быть изменены. Кроме того, старые настольные компьютеры могут фактически иметь ширину 768 пикселей.

2. @Moshe: Я действительно не думал, что мне нужно будет придумывать медиа-запрос святого грааля для моего примера, когда я хотел использовать <link> вместо условного импорта, потому что последнее не сработало бы — я просто добавил то, что уже было в OP для иллюстрации. При желании вы можете отредактировать его, чтобы добавить лучший медиа-запрос.

3. Что, если я сделаю условный @import в конце desktop.css ? Возможно ли это?

4. @hmthur: Не имеет значения, условно это или нет. @import строки просто должны быть в начале таблицы стилей.

5. @BoltClock — Не беспокойтесь. :-) Я просто указывал, что указанный запрос — это не то, что я хотел бы скопировать и вставить в свой HTML-файл по вышеупомянутым причинам.