Я не є дизайнером, але просто знаю достатньо для налаштування з css.
Мені потрібно реалізувати медіа-запити на додаток до існуючого дизайну css для проекту, щоб адаптувати його для мобільних пристроїв, таких як iphone, android і т.д.
Скільки часу може знадобитися, щоб дізнатися достатньо, щоб додати підтримку медіа-запитів до існуючого дизайну?
Будь ласка, не закривайте питання, це конкретна відповідь, що я шукаю, оскільки це потенційно врятує мене витрачати час на вивчення чогось, що не може вирішити мою мету на даний момент.
Відповіді:
0 для відповіді № 1Так, ти можеш. Дізнатися про запити в засобах масової інформації дійсно не так багато.
Вони дозволяють вам сказати «застосувати цей CSS, якщо браузер відповідає цим критеріям (і підтримує медіазапити)».
Отже, ви можете застосувати деякі CSS до пристроїв з a
device-widthне більше 480 пікселів за допомогою запиту медіа в цьому запиті: Як застосувати таблицю стилів до iPhone (а не до IE), без перехоплення браузера?Багато медіа-запитів (наприклад,
width) може приймати префіксmax-абоmin-щоб дозволити запит менше / більше. Тому,max-width: 480pxозначає "браузери шириною 480 пікселів або менше" (і ні "Браузери з максимальною шириною 480 пікселів").Їх можна використовувати в
mediaатрибут<link>елемент для умовної завантаження цілої таблиці стилів або через@mediaat-rule в таблиці стилів для умовного застосування блоку CSS.Усі вбудовані веб-переглядачі для iPhone та Android підтримують їх, тому вони є хорошим засобом для надання різних стилів мобільним пристроям. (Можна також додати їх до звичайних таблиць стилів запобігти мобільні браузери застосовують звичайні таблиці стилів, якщо це підходить для вашого проекту.)
Спектр Media Queries є тут і досить читабельний:
Більшу частину вашої роботи буде пристосовувати дизайн сайту до мобільних пристроїв, а не з'ясовувати, який медіа-запит використовувати.