Search the Community

Всем привет! Разбираюсь с адаптивной версткой на Media Queries, все сделал. Не могу определиться как более оптимально подключить их. Получилась довольно внушительная "простыня" CSS (65кб). Как их лучше подключить: в общий файл CSS или разбить на отдельные файлы в зависимости от разрешения экрана? 1. Если каждый файл будет отдельно и подключатся будет через <link rel="stylesheet" href="smartphone.css" media="only screen and (min-device-width : 320px) and (max-device-width : 480px)">то будет ли браузер скачивать все файлы или ограничится только нужным? Была бы экономия нескольких килобайт при загрузке страницы. 2) Если все правила идут в одном файле, то можно чуть сэкономить на селекторах: если при разрешениях экрана 1024 и 800 какой-то блок не выводится, то display:none достаточно указать для max-width:1024 Но CSS-файл будет большой общий. Поделитесь опытом, пожалуйста! Спасибо!

Здравствуйте, уважаемые форумчане! Не подскажите хорошие статьи по верстке под мобайл - чтобы толково о правильном использовании медиа было расписано. Поняла что фундаментальных знаний в этом вопросе мне явно не хватает - раньше использовала бутстрап, а теперь надо самой все с нуля писать)) Бровзерстек показал море косяков для мобайл в моей верстке - например Андроид сжимает слишком картинки, border dashed глючит и т.п. Заранее благодарю)

Всем здравствуйте! Страница Вот такая проблема. У заказчика iPad4. Она хочет, чтобы сайт на ее устройстве в альбомной ориентации отображался как для desktop. Но не могу это никак настроить! Эмуляторы отрабатывают нормально, а реальные iPad выбирают мобильный вариант. Не срабатывают оба таких media-queries: @media only screen and (max-width: 960px) {} @media only screen and (max-width: 960px),(min-device-width: 768px) and (max-device-width: 1024px) {}@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1), (max-width: 960px) { Как решить данную задачу?

Приветствую всех участников HTML - форума ! Поясню вопрос более подробно, в стиле задачи из учебника Дано: Адаптивная (Responsive) страница, в конце таблицы style.css прописаны @media queries под разные разрешения. Пример: ***Main Style*** h1 { padding-right: 20px; } p { margin-left: 10px; } @media queries (max-width: 991px) { h1 { padding-right: 10px; } p { margin-left: 5px; } } @media queries (max-width: 640px) { p { margin-left: 3px; } } Необходимо что-бы при просмотре с устройства попадающего под параметры последнего @media queries (max-width: 640px) у элемента h1 был задан атрибут padding-right со значением 10px как в предыдущем @media queries (max-width: 991px). Необходимо ли дублировать для этого стиль из одного @media queries в другой ? Я знаю что браузер читает и применяет стили последовательно, также есть разные приоритеты. Но как обстоят дела при открытии странички с других устройств ? Сначала браузер применяет Main Styles а потом сразу применяет нужный ему @media queries или все также последовательно ? Проще говоря кочуют ли стили из "верхних"(больших разрешений) @media queries в нижние(маленькие разрешения) или необходимо их дублировать ?