5 трюков CSS для адаптивных шаблонов


Содержание

Как сделать адаптивный дизайн через CSS

Наличие адаптивного дизайна необходимость – жизнь это доказала своими граблями, никакая Mobile Joomla не даёт такого эффекта, как прямая адаптация сайта. Сегодня я поведаю, как сделать адаптивный дизайн через правку стилей CSS с помощью своей головы и пальцев рук. Разложить всё по полочкам не получится, так как каждый шаблон имеет нюансы, но толчок для начала адаптации я дам.

Адаптация под десктоп

Для начала делаем адаптацию под десктоп. Это базовый этап, от него потом и начинаются танцы с бубном. Многие ошибочно воспринимают мир, думая, что с отображением сайта на обычных компьютерах у них нет проблем, так как шаблон кто-то верстал, и он ровно смотрится при обычном разрешении. При разрешении вашего монитора да, а как на большем экране, как вы смотритесь с absolute и пикселями на экране с разрешением 1920×1080? Цель адаптации дизайна – нормальное отображение сайта на мобильных и отсутствие косяков на больших экранах.

Что делаем? Главное – переводим все большие значения в css шаблона из пикселей (px) в проценты (%). Тут есть несколько правил:

  1. — Изменяем px на % только для больших значений, менять 5 px на 1% (для примера) не надо,
  2. — Все работы делайте через Файербаг, потом переносите значения в реал.

Немного для общего понимания. У вас есть сайт, на котором ширина страницы 1000 px, в ней есть три блока – центральный 800 px и два боковых сайтбара по 100 px. Значит после замены на проценты размер страницы станет 100%, центральный контейнер 80% и боковые блоки по 10%. Грубо, но понятно. Теперь чуть больше конкретики.

У меня до адаптации (сохранил для истории старый файл CSS) основной контейнер был прописан в стилях так:

После адаптации стал таким:

Топ-меню изменилось с:

А смещение блока content реализовано с:

Обратите внимание на код:

overflow: hidden !important;

Им мы убираем прокрутку по горизонтали, это пригодится для мобильной адаптации, иногда имеет смысл указывать только запрет горизонтальной прокрутки с помощью:

overflow-x: hidden !important;

Все работы ведите через Firebug или инспектор Google, проверяйте глазами – сайт должен выглядеть после перевода px в % так же. Экран пока можете не сжимать, до мобильной адаптации ещё не дошли, пока сделали базовую работу для больших экранов.

CSS под мобильные устройства

Базу создали, кстати, это самый сложный этап, теперь надо добиться, чтобы сайт корректно отображался во всех мобильных устройствах. Предыдущих манипуляций мало, так как под маленький экран все сжать в процентах не получится. Согласитесь, разглядеть на смартфоне при разрешении 320 px по ширине сайтбар в 10% невозможно.

Нам понадобится использовать @media screen and, которые вносят изменения в стили для устройств с конкретным разрешением. Я вначале определил с помощью уменьшения экрана браузера, на каком разрешении у меня начинаются проблемы с отображением. Сужая экран, я нашёл свою точку «кривизны», она начинается при ширине 1000px, значит прописывать основные мобильные стили надо отсюда – всё, что больше будет отображаться в стилях обычного десктопа, что меньше отдельными стилями.

Пример @media screen and

Я прописал CSS под мобильные устройства на шаблоне Joomla 1.5 так:

@media screen and (max-width:500px)

@media screen and (max-width:400px)

Немного конкретики по коду.

При ширине экрана меньше 1000 px у меня перестают отображаться боковые сайтбары, шапка, пагинация и футер. Моё имхо – они в мобильной версии не нужны. Это делает код:

.page-numbers, #footer, #navigation, #header,.logo,.nav-box .

По умолчанию в мобильных Joomla 3 и выше боковые блоки уходят вниз, растягивая страницу до безобразия, так что и на новых движках можно кое-что подправить ручками.

Также указаны другие значения для блоков основного контейнера и окна контента, а вывод H1-H4 переведён в проценты (для десктопа меня устраивают пикселя). Правки внесены и в вывод верхнего меню (по хорошему, его надо свернуть, но это не критично и сделаю потом) и изменено отображение картинок:

Для них указано, что максимальный размер картинки по ширине 96% (с отступами красиво), а высота идёт на автомате.

Конкретика закончилась, ещё раз по общему смыслу адаптации сайта (дизайна) через CSS.

  1. — Изменяем большие значения px на %,
  2. — Прописываем отдельно @media screen and для мобильных устройств.

Через @media screen and обязательно закрывайте ненужные для мобильного блоки для вывода, но переводите в % те значения, которые некорректно отображаются, так как их оставили в пикселях в десктопной версии CSS.

Как результат – удобство для пользователя при работе с Joomla Mobile было 65-70%, при адаптивном дизайне на CSS, стало 99%. Выводы на лице – проверка Яндекса и Goole на адаптивность не проходилась, сейчас проходит на ура.

50 Бесплатных Шаблонов Сайтов на HTML5 и CSS3

Свежие бесплатные шаблоны сайтов 2020 г. на HTML5 и CSS3. Любой шаблон html5 css3 можно скачать как для личного пользования, так и для коммерческих проектов. Тематика шаблонов самая разная. Здесь и шаблоны портфолио, шаблоны корпоративных сайтов, лендинги (целевые страницы), шаблоны сайтов услуг, шаблоны блогов и фотогалерей. См. также HTML шаблоны на русском.

Все представленные шаблоны для своего сайта построены на современных версиях HTML5 и CSS3. Кроме того, авторы применяют такие модные фишки, как плоский дизайн, отзывчивый дизайн, адаптивная верстка, слайдеры на jQuery, анимация на CSS3 и пр. То есть, если вы ищете шаблон мобильного сайта, то можете выбрать любой из представленных. Красивые html5 шаблоны 2020, хоть и бесплатны, но выглядят на уровне премиум-класса.

Здесь вы найдете более 50 бесплатных адаптивных шаблонов сайтов высокого качества на HTML5 и CSS3, которые можно использовать как для новых сайтов, так и для переделки уже существующих. Стильные шаблоны сайтов html5 — это то, что вам нужно!

Обновлено 12.03.2020: Так как статья была написана 2 года назад, то многие ссылки стали битыми. Либо владельцы шаблонов слились, либо поменяли статус шаблонов с бесплатных на платные, либо инопланетяне все похерили. Просьба к вам, уважаемые читатели, если нашли такую ссылку, киньте в комментах, я поправлю.

1. Snow — бесплатный шаблон лендинга на HTML5 и CSS3

Шаблон html5 css3 целевой страницы Snow построен на фреймворке Bootstrap. Шаблон очень стильный и классный! Фиксированный фон и громадный Jumbotron — штука, которая показывает главное содержимое сайта. А что на лендинге самое главное? Правильно, призыв к действию. Естественно, шаблон полностью адаптирован под мобильные устройства. Вы можете использовать его даже в качестве основы для собственных шаблонов.

2. Sima — шикарный коммерческий шаблон сайта

Этот шаблон html5 css3 также построен на фреймворке Bootstrap. Вы можете создать на этом шаблоне уникальный сайт с портфолио, вашей командой, ценами, отзывами и всем другим, что будет необходимо. Например, отлично подойдет этот шаблон для сайта клининговых услуг. Анимация в этом шаблоне плавная и эффектная, чистые и хорошо читаемые шрифты. Просто идеальный шаблон!

3. White — прекрасный шаблон одностраничника!

Отличительная особенность шаблона сайта White — два варианта фона в верхней части. На ваш выбор либо слайдер с картинками, либо видео фон. Очень качественный и эффектный шаблон для сайта!

4. Platz — бесплатный HTML5 шаблон сайта на основе сетки

Современный, визуально привлекательный HTML5 шаблон сайта, разработанный на основе сетки (подробнее о сетке читайте здесь). Красивый и отзывчивый дизайн шаблона для блога или сайта.

5. Mart eCommerce — прекрасный HTML5 и CSS3 шаблон сайта для электронной коммерции

Свежий и стильный дизайн шаблона сайта лучше всего подходит для всех видов модных сайтов, продающих обувь, одежду, часы, аксессуары, спортивную одежду и др. В комплекте идет PSD файл, который вы можете скорректировать под свои нужды.

6. Nava — эффектный HTML5 и CSS3 шаблон для творческих сайтов

Nava представляет собой современный HTML5 шаблон сайта, который используется в основном для творческих профессионалов, которые хотят показать их работу во всей красе. Множество вариаций настроек шаблона позволяет сделать ваш сайт уникальным. Легкий, красивый и отзывчивый шаблон для сайта.

7. Box Portfolio — уникальный творческий шаблон сайта на HTML5 и CSS3

Шаблон сайта Box Portfolio обладает чистым и современным минималистичным дизайном. Отлично подойдет для профессионалов, желающих эффектно показать свои работы в сети. Как следует из названия, шаблон сайта идеально заточен под портфолио.

8. Mountain King — популярный и функциональный HTML5 и CSS3 шаблон сайта

Горная тема в дизайне сайтов очень популярна в последнее время. Шаблон сайта Mountain King не исключение. Включает 336 векторных иконок от Typicons. Плюс великолепная анимация на CSS3. Шаблон отлично подойдет для сайтов о путешествиях и портфолио.

9. Beauty Spa — классный шаблон сайта на HTML5 и CSS3 для спа-салонов

Beauty Spa — отзывчивый шаблон сайта, имеющий множество функций, идеально подходящих для сайтов спа-салонов, оздоровительных или фитнес-центров, сайтов о йоге или даже парикмахерских. Отличная читаемость шрифтов и ненавязчивый минимализм.

Цукерберг рекомендует:  Плагин jQuery для favicon

10. Bent – стильный и эффектный лендинг для сайтов на HTML5 и CSS3

Bent — великолепный бесплатный шаблон сайта на html5 и css3. Отзывчивый дизайн, CSS3 анимация, параллакс прокрутка, настраиваемая навигации и прочие вкусняшки. Это чистый дизайн шаблона для сайтов, которые хотят использовать сбалансированную конструкцию, чтобы гарантировать, что посетители будут наслаждаться внешним видом сайта, и в то же время четко видеть его основное содержание.

11. Triangle — бесплатный отзывчивый многоцелевой шаблон на HTML5 и CSS3

Triangle эксклюзивный творческий HTML5 и CSS3 шаблон сайта специально для тех, кто хочет нарулить свой клевый дизайн, но при этом не сделать хуже. В шаблоне есть более 40 предварительно разработанных страниц, которые позволят вам настраивать ваш сайт, как душе угодно.


12. Future Imperfect — блестящий шаблон сайта для творческих людей!

Испытайте подлинное чувство удовольствия с этим шаблоном сайта, идеально подходящим для писателей, авторов, копирайтеров и других работников пера и бумаги. Шаблон можно использовать также для личного блога, блога о путешествиях, о творчестве и пр. Креативный дизайн и адаптивная верстка шаблона понравятся многим.

13. Bodo — прекрасный шаблон для персонального сайта

Bodo — красивый шаблон сайта на HTML5 и CSS3, который идеально подходит для персонального сайта. Особенно для организации портфолио. Чистая и четкая типографика, карусельный слайдер, всплывающие popup окна для показа работ и многое другое.

14. Lens — идеальный HTML5 шаблон сайта для фотографов

Фотографы всегда ищут идеальный шаблон для своего сайта, чтобы показать работы во всей красе, эффектно и самое главное — крупно! Редкий шаблон сайта отвечает этим требованиям. Lens — один из таких шаблонов сайта фотографа.

15. Spectral — уникальный шаблон сайта ручной работы на HTML5 и CSS3

Если вы ищете бесплатные шаблоны сайтов по теме авто тематика, то Spectral будет идеальным решением. Здесь совершенно уникальный дизайн шаблона одностраничного сайта ручной работы. Дизайн можно менять по своему усмотрению. С помощью этого шаблона можно сделать потрясающий сайт абсолютно на любую тему, будь то впечатляющий блог о путешествиях или фотогалерея, сайт автомобильной тематики или хостинг-провайдера.

16. Oxygen — одностраничный HTML5 и CSS3 шаблон сайта

Oxygen — удобный и уникальный шаблон для бизнес сайта. Современный плоский дизайн, адаптивная верстка. Наример, этот шаблон идеально подойдет для сайта о мобильных приложениях или мобильной технике.

17. Mobirise Bootstrap — совершенный бесплатный шаблон сайта на HTML5 и CSS3

Если вы ищете бесплатный шаблон сайта, то Mobirise Bootstrap будет идеален, чтобы начать работу. Это многофункциональный шаблон с массой дополнений в комплекте. Три, предварительно сделанные, макета главной страницы и блога помогут вам в этом. Mobirise Bootstrap также SEO оптимизирован на 100% и адаптирован под любые размеры экранов.

18. La Casa — красивый и бесплатный HTML5 шаблон для сайта недвижимости

Шаблон Brandy прекрасно подойдет для организации коммерческого сайта о недвижимости. Отзывчивый и очень красивый дизайн понравится не только владельцу сайта, но и посетителям.

19. Drifolio — стильный HTML5 шаблон сайта для портфолио

Стильный и анимированный HTML5 и CSS3 шаблон сайта для организации портфолио. Чистый дизайн, отличная типографика, красивые иконки и многое другое.

20. Pluton — яркий и стильный шаблон для одностраничного сайта

Pluton – яркий и эффектный шаблон сайта на Bootstrap. Современный шаблон сайта, с его уникальным одностраничным макетом и адаптивным дизайном, который отлично подходит для студий, фотографов и творческих дизайнеров.

21. SquadFree — профессиональный шаблон одностраничного сайта на HTML5

Шаблон SquadFree отлично подойдет для создания коммерческого одностраничного сайта. Выглядит шаблон не только профессионально, но и адаптирован под все виды экранов. Шаблон собран на основе Bootstrap.

22. Sublime — завораживающий шаблон сайта на HTML5 и CSS3

Sublime — чистый и потрясающе красивый шаблон сайта на HTML5 и CSS3, идеально подходящий для стартапа, креативного агентства или сайта-портфолио. Отзывчивый дизайн и два варианта страниц на выбор.

23. Timber — необычный и красивый HTML5 и CSS3 шаблон сайта

Timber — свежая, стильная и необычная тема шаблона одностраничного сайта. Диагональ — главная фишка дизайна этого шаблона. Шаблон отлично подойдет для бизнес-сайта или портфолио. Есть встроенная галерея, карта и контактная информация, которые вы легко сможете адаптировать под себя.

24. E-Shopper — лучший шаблон сайта для электронной коммерции

E-Shopper — прекрасный вариант шаблона сайта для электронной коммерции. Построен на основе bootstrap с удивительным набором функций для полноценного и эффективного интернет-магазина.

25. Magnetic — бесплатный HTML5 и CSS3 шаблон для фотосайта

Совершенно потрясающий HTML5 и CSS3 шаблон для создания фотосайта или портфолио дизайнера, иллюстратора или художника. Этот шаблон поднимает планку профессиональных шаблонов на новый уровень! Отзывчивый дизайн, отличная поддержка всех видов устройств отображения, легкая и удобная навигация и многое другое.

26. Mabur Portfolio — прекрасный шаблон сайта в стиле минимализма на HTML5 и CSS3

Плоский дизайн этого шаблона сайта в стиле минимализма отлично подойдет для создания портфолио. В шаблоне все детали выверены идеально!

27. Modern Bootstrap HTML5 — бесплатный одностраничный шаблон сайта

Этот бесплатный одностраничник на основе фреймворка Bootstrap прекрасно подойдет для корпоративных сайтов, как для малых компаний, так и для крупных. Плоский дизайн, адаптивная верстка, все элементы дизайна высокого качества. Шаблон представлен в 4 различных цветах.

28. Infusion — стильный одностраничный шаблон сайта на HTML5 и CSS3

Infusion — это прекрасный пример шаблона сайта в стандартах HTML5 и CSS3, который специально разработан для создания бизнес портфолио. Богатая функциональность этого шаблона позволяет эффективно работать с клиентами и привлекать новых.

29. Yebo — корпоративный шаблон сайта на HTML5 и CSS3

Этот высококачественный шаблон сайта в плоском стиле прекрасно подойдет для любого корпоративного сайта. Адаптивный дизайн, масса настроек и возможностей для редактирования.

30. Twenty — эффектный HTML5 и CSS3 шаблон сайта с параллаксом

Этот уникальный и очень красивый шаблон сайта с эффектом параллакса не оставит никого равнодушным. Одностраничный шаблон построен на чистом HTML5 и CSS3 с адаптивной версткой, впечатляющими фонами, поддержкой социальных медиа и пр.

31. Urbanic – отличный HTML5 и CSS3 шаблон сайта на Bootstrap

Urbanic – свежий и классный HTML5 и CSS3 шаблон сайта, построенный на движке Bootstrap. Прекрасно подходит, чтобы сразу начать создавать свой сайт без особых проблем. Шаблон отлично адаптирован под любые размеры экранов.

32. Design Showcase — HTML5 шаблон сайта для портфолио

Визуально гармоничный и эффектный шаблон сайта на HTML5 для организации вашего портфолио. Шаблон прекрасно адаптирован под мобильные устройства, что для сайтов такого формата очень непросто сделать.

33. Mamba One — простой и стильный шаблон сайта на HTML5 и CSS3

Mamba One — это пример простого, но стильного шаблона сайта для создания одностраничника. Совместим со всеми современными браузерами и везде будет отображаться адекватно.

34. KreativePixel — бесплатный шаблон сайта для фотографов

Еще один прекрасный шаблон сайта для фотографов. Отзывчивый дизайн и очень удобная сортировка фоток в портфолио и галереях понравятся многим любителям фотографии. В шаблоне также применен параллакс-эффект, что тоже впечатляет зрителей при просмотре фоток.

35. Retina Ready Responsive App — бесплатный шаблон лендинга на HTML5 и CSS3

Как следует из названия, этот замечательный шаблон сайта не только идеально заточен под целевые страницы, но и отвечает новым мобильным веяниям, особенно в плане четкости отображения на устройствах с Retina дисплеями.

36. Brushed — отзывчивый HTML5 и CSS3 шаблон сайта на движке Bootstrap

Brushed — отзывчивый, бесплатный HTML5 и CSS3 шаблон сайта на основе движка Bootstrap. Также оптимизирован для Retina дисплеев (iPhone, IPAD, IPod Touch и MacBook Pro Retina).

37. Big Picture HTML5 и CSS3 шаблон сайта

Добро пожаловать на Big Picture! Этот адаптивный шаблон сайта на HTML5 прекрасно подойдет всем творческим людям, которым есть что показать, и показать это крупно и эффектно на своем сайте. Кроме того, в шаблоне применена отличная анимация.

38. Tesselatte — бесплатный отзывчивый шаблон на HTML5 и CSS3

Простой шаблон одностраничника, который учитывает все необходимые инструменты для успешного создания сайта. Идеально подойдет для личного блога писателя, копирайтера и просто любителя печатного слова.

39. Overflow — уникальный шаблон сайта на HTML5 и CSS3

Этот уникальный шаблон сайта на чистом HTML5 и CSS3 прекрасно подойдет любому творческому человеку. Он полностью отзывчивый и совершенно бесплатный.

40. Runkeeper — отзывчивый и очень красивый шаблон сайта

Runkeeper — бесплатный, отзывчивый и очень красивый шаблон сайта. Его можно использовать для сайта любой тематики. Блестящий стиль и четкие шрифты, адаптивный дизайн и впечатляющие детали шаблона. Все работает на вас!

41. Pinball Responsive Grid Style — отличный шаблон сайта на основе сетки

Этот замечательный профессиональный шаблон сайта на основе сетки идеально подойдет для корпоративного сайта. Современный плоский дизайн и отзывчивая структура шаблона прекрасно отображается как на экранах больших мониторов, так и мобильных устройств.

42. Prologue — чистый шаблон одностраничного сайта на HTML5 и CSS3


Этот чистый, простой и четкий шаблон сайта на HTML5 и CSS3 прекрасно подойдет для постройки лендинга. Минималистический дизайн не отвлекает от главного. Эффектная боковая панель навигации с прокруткой и четкие линии страницы — просто идеальное сочетание!

43. Helios — современный шаблон сайта на чистом HTML5 и CSS3

Еще один шаблон сайта в стиле минимализма и чистых форм. Специально разработан, чтобы использовать преимущества больших экранов дисплеев, но так же прекрасно адаптирован и под маленькие экраны мобильных устройств.

44. Telephasic — бесплатный и отзывчивый шаблон сайта на HTML5

Этот современный, отзывчивый и абсолютно бесплатный шаблон сайта обладает одним большим преимуществом — он прост и лаконичен, но многим именно этого и не хватает.

45. Strongly Typed — очень красивый шаблон сайта в стиле полу-ретро

Новый шаблон сайта с минималистичным полу-ретро стилем. Просто ретро уже не в моде, а вот легкий намек на него — очень даже кстати. Этот шаблон сайта полностью отзывчивый, построен на чистом HTML5 и CSS3 и включает все необходимые основные элементы страницы. Шаблон Strongly Typed идеально подойдет для сайтов творческой тематики. Например, для сайта о домашнем декоре.

46. Striped — чистый, красивый и функциональный шаблон сайта HTML5 и CSS3

Свежий и чистый, красивый и функциональный, новый шаблон сайта на HTML5 и CSS3. Имеет в своем арсенале все необходимые элементы страниц, в том числе оформленные цитаты, таблицы и списки, а также адаптированный сайдбар (справа или слева — по вашему желанию).

47. Parallelism — необычный и стильный шаблон сайта на HTML5 и CSS3

Parallelism — стильный шаблон сайта для организации портфолио или фотографий. Необычность его в том, что прокрутка здесь не вертикальная, как обычно, а горизонтальная. Это придает сайту особый шик и запоминаемость.

48. Miniport — полностью отзывчивый HTML5 шаблон сайта в стиле минимализма

Отличный шаблон сайта в стиле минимализма на HTML5. Прекрасно подойдет как для личного сайта/блога, так и для небольшого корпоративного сайта одностраничника или в качестве сайта-визитки.

49. Verti — просторный и свободный отзывчивый шаблон сайта на HTML5

Чистый и просторный дизайн этого шаблона сайта прекрасно подойдет для набольших корпоративных сайтов или для коммерческих проектов. Отзывчивый и удобный как для автора, так и для пользователей.

50. ZeroFour — впечатляющий и стильный шаблон сайта на HTML5 и CSS3

И последний в списке, но не последний по качеству и внешней эффектности шаблон сайта — ZeroFour. Стильный дизайн, очень красивое меню, идеально выверенные формы и кнопки, красивые иконки и многое другое. И все это абсолютно бесплатно!

Надеюсь, вы нашли для себя что-то подходящее среди этих замечательных шаблонов сайтов на HTML5 и CSS3. Удачи!

Добавьте в закладки, чтобы потом быстро найти.

ПС: Если никак не можете определиться с выбором, прочтите статью «Я не знаю, чего я хочу». Будет полезно.

Используем медиазапросы CSS3 для адаптивной вёрстки шаблона 31

Здравствуйте, уважаемые друзья и гости моего блога. В сегодняшней статье поговорим о медиазапросах CSS3 и о том, как с их помощью создаются адаптивные шаблоны сайтов.

Но, даже если вы не собираетесь адаптировать шаблон сайта, эти знания помогут вам с такими элементами, как рекламные блоки, формы подписки с фоновым изображение, и всем, что вылезает и съезжает за пределы каркаса, когда меняется размер экрана.

В общем, медиазапросы – это хорошая альтернатива создания отдельного мобильного шаблона для сайта. О том, как важно позаботится об удобстве мобильных посетителей я писал ещё год назад, все доводы в пользу адаптивного дизайна можно прочитать здесь.

Зачем нужны медиазапросы и как они работают

Вы, конечно же, знаете, что каждый сайт состоит из HTML каркаса и CSS стилей. Всё остальное, базы данных, скрипты и прочие примочки, нужны в зависимости от сложности проекта.

HTML – каркас, это разметка сайта. То есть блоки с шапкой, подвалом, сайтбарами и контентом. Если вы представляете себе таблицу в текстовом редакторе Word, то каркас сайта – это нечто похожее на таблицу. Только вот код самого простого каркаса выглядит вот так:

Но в таком виде, на экране мониторов будет отображаться белый экран. Так как нет содержимого блоков и самого главного – CSS стилей оформления.

Когда же стили оформления присвоены, то страница сайт приобретает привычный для нас вид. Где изображения на своих местах, размер и цвет шрифта соответствует общей концепции и так далее.

Только вот опять беда, этот симпатичный вид, хорошо выглядит только на экранах компьютеров. А при просмотре с мобильного устройства, всё отображается либо мелко, либо и вовсе не вмещается в экран браузера.

Происходит это из-за тог, что изначально стили были прописаны для стандартных мониторов, кто же мог подумать, что современные гаджеты так стремительно захватят мир. А тут ещё и поисковики приняли адаптивный дизайн за фактор ранжирования. Ну, прямо, засада какая-то.

И вот тут-то приходят на помощь медиазапросы. Которые, кстати, и стали доступны с появление новой версии CSS3.

Так как же они работают? А работают они следующим образом, если вам приходилось хоть раз писать формулы в Excel или программировать, то вы знакомы с условием «если». То есть медиазапрос создаёт такие условия: «если экран браузера или устройства меньше 600px, то применяй следующие стили».

А выглядит это таким вот образом:

Это условие будет менять дизайн сайта и при изменении размера окна браузера и при просмотре сайта с мобильного устройства.

Если же применять запросы только для маленьких гаджетов, то запрос будет выглядеть так:

Вот такие простые условия, но очень действенно работают. Но, это лишь один пример, когда мы ставим условие на ширину экрана. А таких условий достаточно много, где можно создавать условия и на высоту, и на ориентацию и многое другое. С полным списком медиазапросов вы можете ознакомиться здесь.

А теперь давайте разберемся, где же прописывать подключение медиазапросов.

Как подключить медиазапросы

На самом деле здесь всё очень просто. Вы можете добавить запросы в таблицу стилей вашего сайта (style.css) или создать новый файл со стилями для мобильных устройств и подключить его как отдельный файл стилей.

Для начала разберём первый вариант, — добавление медиазапросов в таблицу стилей. Запрос должен располагаться после всех основных стилей, то есть в самом низу файла style.css.

Медиазапросы в таблице стилей

Таким образом, первоначально будут выполнены основные стили, а в случае выполнения условий, применены стили, указанные в запросе.

Этот способ хорошо использовать, если нужно внести небольшие коррективы в шаблон. Скажем, подправить вид отображения блоков контекстной рекламы при просмотре с маленьких экранов.

Цукерберг рекомендует:  Курсы интернет маркетолог - обучение интернет маркетингу с нуля онлайн

Теперь рассмотрим второй вариант, более сложный. Ну, сложный он не в плане добавления запросов, а в плане создания более масштабных стилей. К примеру, если бы я сейчас захотел сделать шаблон моего блога адаптивным, то мне бы пришлось воспользоваться именно этим способом. Создать отдельный файл с кучей запросов и подключить его к своему блогу. Благо, я решил сменить шаблон и мне этого делать не придётся.

Давайте рассмотрим процесс добавления медиазапросов этим способом.

Для начала вы создаёте отдельный файл с запросами и стилями. Сделать это можно в редакторе Notepad++. Сохраняете его как css файл.

Создание файла с медиазапросами

Далее, нужно копировать этого файла на хостинг в папку вашей темы, или в папку, где хранится файл style.css.

Копирование файла на хостинг

И в завершение процедуры нужно подключить таблицу стилей для мобильных устройств. Для этого открываете файл заголовка (header.php), ищите, где подключается основные стили, и ниже добавляете подключение мобильных стилей.

Этот код говорить о том, что эти стили будут срабатывать, если экран устройства меньше 600px.

Вот, в принципе и все хитрости с медиазапросами. Как гласит правило Парето – 20% усилий гарантирует 80% успеха. То есть знания, полученные в статье, на 80% гарантируют успешное применение на практике. Остальное дело за знаниями HTML и CSS.

Ах да, я же ещё хотел рассказать вам об инструментах, которые помогут вам в разработке адаптивной верстки сайта.

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

Как на компьютере посмотреть вид сайта с мобильных устройств

Сегодня в современных браузерах Firefox, Chrome, Яндекс есть панель разработчика, в которой легко можно просмотреть, как выглядит сайт на мобильных устройствах.

Для этого достаточно нажать правую кнопку мышки на странице сайта и выбрать пункт «Просмотр кода элемента» для Хрома и Яндекса или «Исследовать элемент» для Файрфокса.

Просмотр адаптивной верстки в Яндекс

Просмотр адаптивной верстки в Firefox

А в панели разработчика можно просмотреть адаптивную вёрстку, нажав на кнопочки, показанные на скриншотах выше.


Также для этих целей можно воспользоваться сервисом Screenfly . Работать с ним очень просто достаточно ввести в поле адрес сайта и смотрите, как он выглядит на разных мобильных устройствах.

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

А у меня на сегодня всё, увидимся в новых статьях и видеоуроках. Желаю вам успехов!

Похожие статьи по теме:

Друзья, поддержите блог! Поделитесь статьёй в социальных сетях:

HTML Адаптивный веб-дизайн

Что такое Адаптивный веб-дизайн?

Адаптивный веб-дизайн делает вашу веб-страницу хорошо выглядеть на всех устройствах (настольных компьютерах, планшетах и телефонах).

Отзывчивый веб-дизайн об использовании HTML и CSS, чтобы изменить размер, скрыть, сжать, увеличить или переместить содержимое, чтобы он хорошо выглядеть на любом экране:

Примечание: Веб-страница должна хорошо выглядеть на любом устройстве!

Настройка видового экрана

При создании адаптивных веб-страниц добавьте следующий элемент на всех веб-страницах:

Пример

При этом будет установлен видовой экран страницы, в котором будут даны инструкции по управлению размерами и масштабированием страницы.

Ниже приведен пример веб-страницы без мета-тега видового экрана и той же веб-страницы с мета-тегом видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки выше, чтобы увидеть разницу.

Адаптивные образы

Адаптивные образы — это изображения, которые хорошо масштабируются в соответствии с любым размером браузера.

Использование свойства Width

Если свойство CSS width имеет значение 100%, изображение будет реагировать и масштабироваться вверх и вниз:

Пример

Обратите внимание, что в приведенном выше примере изображение может быть увеличено до размера, превышающего его исходный размер. Лучшим решением, во многих случаях, будет использование свойства max-width вместо этого.

Использование свойства max-width

Если свойство max-width имеет значение 100%, изображение будет масштабироваться, если это необходимо, но никогда не масштабироваться, чтобы быть больше, чем его исходный размер:

Пример

Отображение различных изображений в зависимости от ширины браузера

позволяет определять различные изображения для различных размеров окна браузера.

Измените размер окна обозревателя, чтобы увидеть, как изображение ниже изменяется в зависимости от ширины:

Пример

Размер адаптивного текста

Размер текста можно задать с помощью блока «VW», что означает «ширина видового экрана».

Таким образом размер текста будет следовать размеру окна браузера:

Hello World

Измените размер окна обозревателя, чтобы увидеть, как масштабируется размер текста.

Пример

Hello World

Видовой экран — это размер окна обозревателя. 1ВВ = 1% ширины видового экрана. Если видовой экран шириной 50 см, 1ВВ составляет 0.5 cm.

Мультимедийные запросы

В дополнение к изменению размера текста и изображений, также часто используются мультимедийные запросы на адаптивных веб-страницах.

С помощью мультимедийных запросов можно определить совершенно разные стили для различных размеров браузера.

Пример: измените размер окна обозревателя, чтобы увидеть, что три элемента div ниже будут отображаться горизонтально на больших экранах и штабелироваться вертикально на небольших экранах:

Пример

Совет: Чтобы узнать больше о мультимедийных запросах и адаптивном веб-дизайне, прочитайте наш учебник RWD.

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

Отзывчивый веб-страницы должны хорошо выглядеть на больших экранах настольных и малых мобильных телефонов.

Руководство для новичков: простой адаптивный сайт при помощи CSS

Все говорят об адаптивном веб-дизайне. Но значит ли это, что все понимают, для чего он нужен?

Респонсивный дизайн – это не только разработка сайтов для мобильных устройств, здесь речь идет об адаптации макетов под разные размеры экрана (viewports).

В этом уроке мы рассмотрим основные принципы, лежащие в адаптивном веб-дизайне, для лучшего понятия этой техники. Затем, мы создадим адаптивный веб-сайт, который будет отлично масштабироваться на больших и малых экранах. Респонсивный веб-дизайн стал очень популярным, когда все больше и больше людей используют мобильные устройства, такие как iPhone, iPad, BlackBerry, а также другие смартфоны и планшеты с доступом к интернету.

Важно понимать, что сайт не должен быть построен под конкретный рабочий стол или мобильное устройство. Здесь важна способность макета адаптироваться под различные размеры.

Разочарование пользователей

Некоторые люди думают, что сократить функционал и устранить контент, который они считают несущественным, это является нормальным для пользователя. Но как вы можете быть уверены, что информация, которую вы урезали или перенесли на вторичную страницу, не является контентом, который наиболее важный для меня?!

Во-первых, нужно понимать, что респонсивный дизайн, это не только забота о мобильном дизайне. Во-вторых, разработка хорошего адаптивного сайта, требует большое количество времени и усилий, а не только помощь медиа-запросов. С огромным и все возрастающим числом веб-устройств, очень важно, дать своему веб-сайту шанс эффективно облегчить пользовательский опыт.

Для респонсивного веб-сайта, мы можем использовать один и тот же код как для настольного компьютера, так и для мобильного устройства. Это удобно тем, что мы не должны отдельно корректировать контент для каждого устройства. Но многие веб-сайты скрывают свое содержимое, считая его ненужным для мобильных пользователей. В этом есть две проблемы:

  • Во-первых, это эффективно наказывает мобильных пользователей, просматривающих сайт.
  • Во-вторых, скрытые стили в CSS, не означает, что контент не загружается. Это может массово повлиять на эффективность, особенно для тех, у кого плохая связь.

Поэтому лучшим подходом к разработке веб-сайта, заключается в рассмотрении дизайна мобильных или небольших устройств, в первую очередь. Таким образом, вы сможете сосредоточиться на наиболее важной информации, которую ваш веб-сайт должен выдать. А потом, при необходимости, можно использовать условные методы загрузки, где ваши сетки макета, большие изображения и медиа-запросы, нанесены поверх уже существующей мало-экранного дизайна.

Пошаговое руководство

Для этого урока, мы создали веб-сайт, который прекрасно масштабируется между большими и малыми экранами. Вы сохраняете весь контент, на всех размерах экрана. И с помощью медиа запросов, навигация будет переключена с горизонтального на вертикальный дисплей, для небольших устройств.

Ключевым элементом гибкости в адаптивном дизайне, является fluid ширина макета. Все, что вам нужно сделать, это создать wrapper, content и column widths, которые будут адаптироваться под различную ширину устройств. В этом нет ничего нового, но сейчас это важнее, чем когда-либо. Чтобы не усложнять задачу, мы создадим fluid страницу, состоящую из навигации, главного изображения и двух колонок, которая учитывает расположение на устройствах различных размеров. Мы, также включили respond.min.js, который позволяет медиа-запросам работать в IE6-8.

Основная HTML структура:


CSS

Когда дело доходит до CSS, то установить max-width, будет хорошей идеей, это остановит сайт от масштабирования на огромных экранах, но не будет удерживать от сокращения страниц. Один из основных вопросов при переключении с фиксированной ширины на fluid, это изображения. В CSS, есть простое решения этой проблемы. Просто установите ширину изображения на 100%. Также добавим auto для высоты изображений, чтобы избежать сплющенных изображений в Опере и Сафари на малых экранах:

Ваше изображение будет отображаться на его родительском элементе в полную ширину, и будет сжиматься вместе с ним. Только убедитесь, что изображения max-width, не превышают максимальную ширину его контейнера.

Использование больших изображений может влиять на время загрузки. Поэтому для небольших экранов, существует респонсивный метод для изображений, который определяет размер экрана пользователя, и выдает меньше/больше картинку, в зависимости от того, что необходимо. Этот метод, пока еще сложно назвать идеальным, но все таки стоит его рассмотреть.

Переключение главной навигации

Основная причина, почему вам надо сменить навигацию, это происходящая минимизация, которая может привести к нечитаемости и трудности нажатия кнопок. Используя этот метод, вы облегчите жизнь пользователя. Вы также можете заметить в коде, что мы внесли изменения в #main и aside разделы, для соединения их в одну колонку.

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

Чтобы разрешить медиа-запросам войти в полный эффект, обычный мобильный, оптимизированный, респонсивный сайт должен содержать что-то вроде следующего:

5 трюков CSS для адаптивных шаблонов

Когда HTML5 стал поддерживаться современными браузерами,его начали использовать практически во всех современных сайтах. HTML5 в связке с CCS3 предоставляет огромные возможности для создания удивительных, функциональных и удобных сайтов.

В этой подборке я попытался собрать наиболее качественные адаптивные шаблоны сайтов, построенные на HTML5 и CSS3. Несмотря на то, что они бесплатные, вы можете увидеть, что большинство этих шаблонов выглядят как премиум-шаблоны.

1. Gumba – минималистический HTML5/CSS3 шаблон портфолио

Gumba – минималистический HTML5/CSS3 шаблон портфолио

2. La Casa – HTML шаблон сайта отеля

La Casa – HTML шаблон сайта отеля

3. Modex – шаблон портфолио на Bootstrap

Modex – шаблон портфолио на Bootstrap

4. Drifolio – бесплатный html-шаблон портфолио

Drifolio – бесплатный html-шаблон портфолио

5. SquadFree – бесплатный шаблон на Bootstrap HTML5

Squad Free — адаптивный шаблон на bootstrap

6. Pluton – бесплатный одностраничный шаблон на Bootstrap HTML5

Pluton — бесплатный одностраничный шаблон на Bootstrap HTML5

7. Sublime – прекрасный HTML5/CSS3 шаблон сайта

Sublime – прекрасный HTML5/CSS3 шаблон сайта

8. Timber – одностраничный шаблон на Bootstrap

Timber – одностраничный шаблон на Bootstrap

9. E-Shopper — бесплатный шаблон для интернет-магазина

E-Shopper — бесплатный шаблон для интернет-магазина

10. AdminLTE — шаблон панели управления администратора

AdminLTE — шаблон панели управления администратора

11. Magnetic — бесплатный шаблон для сайта фотографа

Magnetic — бесплатный шаблон для сайта фотографа

12. Mabur — адаптивный шаблон для портфолио

Mabur — адаптивный шаблон для портфолио

13. Moderna — адаптивный шаблон сайта на Bootstrap

Moderna — адаптивный шаблон сайта на Bootstrap

14. Sport Here — минималистичный шаблон сайта

Sport Here — минималистичный шаблон сайта

15. Crafty — адаптивный шаблон корпоративного сайта

Crafty — адаптивный шаблон корпоративного сайта

16. Infusion — одностраничный шаблон портфолио

Infusion — одностраничный шаблон портфолио

17. Yebo — HTML/CSS шаблон сайта в плоском стиле

Yebo — HTML/CSS шаблон сайта в плоском стиле

18. Twenty — шаблон на HTML5 с эффектом параллакса

Twenty — шаблон на HTML5 с эффектом параллакса

19. Urbanic — шаблон на Bootstrap

Urbanic — шаблон на Bootstrap

20. Calm — шаблон портфолио

Calm — шаблон портфолио

21. Mamba — одностраничный шаблон

Mamba — одностраничный шаблон

22. Шаблон портфолио в плоском стиле

Шаблон портфолио в плоском стиле

23. Brushed — одностраничный адаптивный шаблон сайта

Brushed — одностраничный адаптивный шаблон сайта

24. Big Picture — шаблон сайта на HTML5

Big Picture — шаблон сайта на HTML5

25. Tesselatte — бесплатный адаптивный шаблон сайта

Tesselatte — бесплатный адаптивный шаблон сайта


26. Overflow — адаптивный шаблон сайта на HTML5

Overflow — адаптивный шаблон сайта на HTML5

27. Runkeeper — шаблон сайта мобильного приложения

Runkeeper — шаблон сайта мобильного приложения

28. Pinball — адаптивный шаблон блога

Pinball — адаптивный шаблон блога

29. Bak One — одностраничный адаптивный шаблон сайта

Bak One — одностраничный адаптивный шаблон сайта

30. Andia — бесплатный шаблон сайта

Andia — бесплатный шаблон сайта

31. Produkta — 4 HTML-шаблона в одном

Produkta — 4 HTML-шаблона в одном

32. Адаптивный шаблон сайта на HTML5, CCS3, JQuery

Адаптивный шаблон сайта на HTML5, CCS3, JQuery

Бесплатные адаптивные HTML5 и CSS3 шаблоны

Сегодня мы покажем вам набор шаблонов, которые абсолютно бесплатны и имеют плоский дизайн, отзывчивость, ползунки jQuery и т. д. Хотя они и бесплатны, это не значит, что они хуже платных, так как мы собрали коллекцию лучших . Бесплатные адаптивные шаблоны вы найдете ниже , наслаждайтесь!

Capture — бесплатный Bootstrap шаблон

Крутой и в то же время элегантный шаблон для настройки окружения с помощью мобильного приложения, которое здесь демонстрирует функцию камеры. Этот bootstrap шаблон можно использовать для любых услуг, которые вы хотите продавать онлайн.

La Casa — HTML шаблон, продажа недвижимости

Готовый сайт по продаже/арене недвижимости на HTML5.

Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).

Drifolio — тема для портфолио на HTML

Шаблон отображающий для бизнес-профиля с интересной анимацией. Отзывчивый одностраничный макет этого шаблона привлекателен всеми своими уникальными функциями для настройки профиля. Бесплатный шаблон доступен с CSS и HTML-файлами.

Pluton — Одностраничный Bootstrap шаблон

Современный веб-сайт с отзывчивым дизайном., который отлично подходит для студий, фотографов и творческих дизайнеров.

SquadFree — Бесалтный шаблон на Bootstrap

Одночастичный шаблон для профессиональных стартапов в сфере онлайн-бизнеса.

Sublime —потрясающий HTML5/CSS3 шаблон веб-сайта

Sublime – это чистый и потрясающий шаблон сайта, идеально подходящий для начинающих креативных агентств и портфолио.

Timber — бесплатный одностраничный шаблон Bootstrap

Timber построен с использованием адаптивного фреймворка Bootstrap и длинного одностраничного макета. Шаблон подойдет для бизнес-сайта, который включает в себя портфолио, галерею, карту и контактную информацию.

E-Shopper — отличный Ecommerce HTML шаблон

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

AdminLTE—шаблон панели управления и аналитики

Бесплатный шаблон адаптивной панели управления, выполненный в стандартах HTML5, CSS3. Благодаря более чем 1000+ иконкам и большому набору элементов пользовательского интерфейса этот шаблон может стать основой всех ваших тем для админ панелей.

Magnetic — шаблон сайта инсталяций

Бесплатный шаблон веб-сайта на HTML5 для демонстрации ваших инсталяций или анимаций.

Современный шаблон на Bootstrap

Бесплатный одностраничный шаблон, построенный на bootstrap для корпоративных веб-агентств. Тема имеет четырехцветный макет, встроенный в домашнюю страницу.

Цукерберг рекомендует:  Сетка анимированных изображений

Modex — тема для портфолио на Bootstrap

Адаптивные шаблоны для портфолио, подходят для различных девайсов и имеет плоский дизайн.

Crafty —корпоративный HTML шаблон

Бизнес шаблон на HTMl5 и CSS3, который хорошо подходит для любой компании. Адаптивный шаблон с элементами создающими «призыв к действию» для улучшения конверсий.

Twenty—HTML5 шаблон

Уникальный одностраничный шаблон на HTML5 с гибкой компоновкой. Включает в себя элементы блога, кнопки вызова с эффектами Parallax.

Urbanic — Bootstrap шаблон

Шаблон на HTML5, cSS3 и Bootstrap с такими страницами как: contacts, about, blog и так далее. Полностью адаптивный.

Адаптивная верстка: что это и как использовать

Адаптивная верстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.

В этой статье будут рассмотрены основные элементы сайта и способы их адаптации.

Регулировка разрешения экрана

В принципе, можно разбить устройства на разные категории и верстать для каждой из них отдельно, но это займет слишком много времени, да и кто знает, какие стандарты будут через пять лет? Тем более, согласно статистике мы имеем целый спектр разнообразных разрешений:

Становится очевидно, что мы не сможем продолжать верстать для каждого устройства отдельно. Но что тогда делать?

Частичное решение: делаем все гибким

Конечно, это не идеальный способ, но он устраняет большую часть проблем.

Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:

Весь дизайн — микс адаптивных слоев, картинок и, в некоторых местах, умной разметки. Создание адаптивных слоев — частая практика, чего нельзя сказать об адаптивных картинках. Однако если они вам нужны, обратите внимание на следующие техники:

Для более детальной информации рекомендуем ознакомиться с книгой Зои Микли Джилленуотер (Zoe Mickley Gillenwater) «Flexible Web Design: Creating Liquid Layouts with CSS» и загрузить главу «Creating Flexible Images».

«КРОК», Воронеж, Иркутск, Краснодар, Москва, Нижний Новгород, Пермь, Самара, Санкт-Петербург, Троицк, Челябинск, от 120 000 до 240 000 ₽

На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:

Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.


Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).

Гибкие изображения

Работа с картинками — одна из самых главных проблем при работе с адаптивным дизайном. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:

Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100% .

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

Еще один способ: отзывчивые изображения

Техника, представленная Filament Group, не только изменяет размер изображений, но и сжимает разрешение картинок на маленьких экранах, чтобы ускорить загрузку.

Для использования данной техники требуется несколько файлов, доступных на Github. Сначала берем JavaScript-файл (rwd-images.js), файл .htaccess и rwd.gif (файл изображения). Потом используем немного HTML, чтобы связать большие и маленькие разрешения: сначала маленькое изображение с префиксом .r (чтобы показать, что картинка должна быть адаптивной), потом ссылка на большое изображение с помощью data-fullsrc :

Для любого экрана шире 480 px загрузится изображение с большим разрешением (largeRes.jpg), а на маленьких экранах загрузится (smallRes.jpg).

Интересная фича для iPhone

В iPhone и iPod Touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной верстки. Однако изображений и текста не будет видно:

Для решения данной проблемы используется тег meta :

Если initial-scale равно единице, ширина картинок становится равной ширине экрана.

Настраиваемая структура макета страницы

Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл со стилями или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.

Например, у вас есть главный файл со стилями, который задает #wrapper , #content , #sidebar , #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.

На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.

Медиазапросы CSS3

Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width , то стили будут проигнорированы. max-width делает противоположное.

Медиазапрос заработает только когда min-width будет больше или равна 600 px.

В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.

В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width :

Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):

Также значения медиазапросов можно комбинировать:

Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.

Загрузить определенный лист со стилями для разных значений медиазапросов можно так:

JavaScript

Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:

Опциональное отображение контента

Возможность сжимать и менять местами элементы, чтобы они уместились на маленьких экранах, — это замечательно. Но это не лучший вариант. Для мобильных устройств обычно используется более широкий набор изменений: упрощенная навигация, более сфокусированный контент, списки или строки вместо колонок.

К счастью, CSS дает нам возможность показывать и прятать контент с неимоверной легкостью.

display: none используется для объектов, которые нужно спрятать.

Вот наша разметка:

В главном файле стилей мы меняем ссылки на колонки, т. к. у нас достаточно большой экран, чтобы отобразить весь контент.

Теперь прячем колонки и показываем ссылки:

Если размер экрана уменьшается, можно, например, использовать скрипт или альтернативный файл со стилями, чтобы увеличить белое пространство или заменить навигацию для большего удобства. Таким образом, имея возможность прятать и показывать элементы, изменять размеры картинок, элементов и многое другое, можно адаптировать дизайн под любые устройства и экраны.

Ускоряем разработку: Стартовые шаблоны для адаптивной верстки сайтов (start_html)

Чистые, готовые к бою HTML5 шаблоны (CSS и SASS), предназначенные для ускорения разработки современных адаптивных сайтов. Шаблоны содержат наиболее используемые и актуальные компоненты. Шаблоны поддерживаются и регулярно обновляются, перед стартом проекта — рекомендую скачать новую версию.

Чистые, готовые к бою HTML5 шаблоны (CSS и SASS), предназначенные для ускорения разработки современных адаптивных сайтов. Шаблоны содержат наиболее используемые и актуальные компоненты. Шаблоны поддерживаются и регулярно обновляются, перед стартом проекта — рекомендую скачать новую версию.

Скачать стартовые шаблоны (плюс описание компонентов): https://github.com/agragregra/start_html

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

5 трюков CSS для адаптивных шаблонов

На этом уроке мы будем создавать адаптивный CSS-макет с 100% шириной и высотой и с плавными переходами страниц. Идея состоит в создании секций с содержанием и навигации, которая позволит переключаться между этими секциями. Мы будем использовать радио-кнопки для навигации и создавать анимацию для содержания, создавая эффект «плавной прокрутки». Эта идея может быть полезна для веб-страниц или веб-приложения, где содержание должно строго соответствовать размеру экрана (ширина и высота).

Пожалуйста, обратите внимание: результат этого урока будет работать, как задумано, только в браузерах, которые поддерживают соответствующие свойства CSS.

Также имейте ввиду, что мы опустим префиксы для различных браузеров в примерах кода в этой статье. Но Вы, конечно, можете найти их в исходных файлах.

Разметка

Структура макета будет состоять из основного контейнера с классом st-container, который будет содержать радио-кнопки и ссылки, а блок с классом st-scroll, который будет содержать секции с контентом:

type = «radio» name = «radio-set» checked = «checked» id = «st-control-1» />
href = «#st-panel-1» > Serendipity >

class = «st-panel» id = «st-panel-1» >

> Serendipity >

> Banksy adipisicing eiusmod banh mi sed.

class = «st-panel st-color» id = «st-panel-2» >

>

Итак, что мы хотим сделать: переместить блок-оболочку, изменяя его значение top и показывая соответствующую секцию в окне просмотра. Это можно сделать выбрав соответствующую радио-кнопку, которая ссылается на соответствующую секцию в блоке с классом st-scroll.

Причина, по которой мы используем ссылки, а не как обычно лэйблы (тег label), является то, что мы хотим иметь возможность создать своего рода «fallback» для старых браузеров (родственные комбинаторы (sibling combinators) не работают в старых браузерах). Ссылки имеют аттрибут href с идентификатором соответствующий секции, таким образом мы просто скрываем радио-кнопки, делая ссылки кликабельными.

Теперь давайте перейдем к стилям!

Итак, как нам сделать этот макет гибким и его секции точно соответствующие размеру экрана? Хитрость заключается в том, чтобы сделать главный контейнер с абсолютным позиционированием, и шириной и высотой 100%, внутренние секции будут иметь относительное позиционирование. Но они также будут иметь ширину и высоту 100%. Это позволит каждой секции быть равной в точности размеру экрана.

Так как мы будем создавать навигацию по контенту с помощью анимации секции-оболочки, то мы установим для body свойство overflow:hidden:

Давайте посмотрим на стили основного контейнера:


Мы поместим «навигацию» в нижнюю часть страницы, задав ей фиксированное положение (position: fixed). Обратите внимание, что мы устанавливаем одинаковую ширину и высоту для радио-кнопок и ссылок. Идея состоит в том, чтобы наложить радио-кнопки на ссылки, чтобы они были кликабельными, но задаем им прозрачность равную 0, чтобы они не были видны. Также важно то, что мы устанавливаем z-index для радио-кнопок больше, чем для ссылок:

.st-container > input ,
.st-container > a <
position : fixed ;
bottom : 0px ;
width : 20% ;
cursor : pointer ;
font-size : 16px ;
height : 34px ;
line-height : 34px ;
>

.st-container > input <
opacity : 0 ;
z-index : 1000 ;
>

.st-container > a <
z-index : 10 ;
font-weight : 700 ;
background : #e23a6e ;
color : #fff ;
text-align : center ;
text-shadow : 1px 1px 1px rgba ( 151 , 24 , 64 , 0.2 ) ;
>

Так как мы используем проценты для «растягивания» ссылок и радио-кнопок по ширине экрана, у нас могут появиться некоторые проблемы с округлением значений, которые вызвали бы появление пробелов. Для того чтобы их скрыть, мы используем псевдо-элемент, который будет находиться под ссылками и радио-кнопками. Он будет иметь тот же цвет фона, что и ссылки:

Наши ссылки и радио-кнопки все еще не расположены как нужно, так что давайте зададим им соответствующия значения для свойства left:

#st-control-1 , #st-control-1 + a <
left : 0 ;
>

#st-control-2 , #st-control-2 + a <
left : 20% ;
>

#st-control-3 , #st-control-3 + a <
left : 40% ;
>

#st-control-4 , #st-control-4 + a <
left : 60% ;
>

#st-control-5 , #st-control-5 + a <
left : 80% ;
>

Используя тот же принцип, мы определим стили для «выбранных» пунктов меню. Когда мы нажимаем на радио-кнопку, мы задаем соответствующей ссылке другой цвет фона:

Давайте также добавим маленький треугольник с помощью псевдо-класса :after, и зададим ему тот же цвет:

Вы можете также использовать CSS Arrow, Please!, если вы хотите быстро создавать подобные стрелки.

Давайте также определим стили при наведении на ссылку:

.st-container > input :hover + a <
background : #AD244F ;
>

.st-container > input :hover + a :after <
border-bottom-color : #AD244F ;
>

Оболочка для секций и секции будут иметь относительное позиционирование, и мы зададим им ширину и высоту 100%. Для оболочки также зададим top и left равные 0.

Transitions будет анимировать значение свойства transform для соответствующей позиции:

.st- scroll ,
.st-panel <
position : relative ;
width : 100% ;
height : 100% ;
>

.st- scroll <
top : 0 ;
left : 0 ;
transition : all 0.6s ease-in-out ;

/* Let’s enforce some hardware acceleration */
-webkit-transform : translate3d ( 0 , 0 , 0 ) ;
-webkit-backface- visibility : hidden ;
>

.st-panel <
background : #fff ;
overflow : hidden ;
>

Хотя я обычно не добавляю префикс браузера к свойствам, я оставил эти Webkit-префиксы, т.к. они помогут в создании сглаживания.

Давайте определим позиции для каждой выбранной радио-кнопки для оболочки st-scroll. Так как мы знаем, что каждая секция имеет высоту 100%, мы знаем её точное положение. Мы будем использовать свойство transform, чтобы переместить секцию-обертку по Y-измерению (вверх и вниз):

.st- scroll <
transform : translateY ( 0% ) ;
>
#st-control-2 : checked

.st- scroll <
transform : translateY ( -100% ) ;
>
#st-control-3 : checked

.st- scroll <
transform : translateY ( -200% ) ;
>
#st-control-4 : checked

.st- scroll <
transform : translateY ( -300% ) ;
>
#st-control-5 : checked

.st- scroll <
transform : translateY ( -400% ) ;
>

Теперь давайте зададим стили для содержания. Для верхнего треугольника с иконой, мы просто повернем блок с классом st-deco. Мы разместим его в центре верхней части экрана, установив top:0, и left:50%, и придав ему отрицательный левый отступ равный половине его ширины. translateY(-50%) позволит видеть только половину блока, таким образом создавая треугольник:

Для иконки мы будем использовать шрифт Raphaël Icon-Set via @font-face и data-attribute/pseudo-class технику. Псевдо-элемент :after будет вставлять иконку в HTML-код для этого элемента. Обратите внимание, что нам нужно повернуть её обратно в противоположном направлении от родительского элемента, чтобы видеть её в «нормальном» положении:

Заголовок будет размещен в центре экрана с отрицательным верхним отступом:

Каждый раз, когда мы нажимаем на радио-кнопку, мы хотим, чтобы соответствующий заголовок, появлялся с использованием элементов анимации. Для того, чтобы выбрать правильный заголовок, мы будем использовать общенный родственный комбинатор:

.st- scroll #st-panel-1 h2 ,
#st-control-2 : checked

.st- scroll #st-panel-2 h2 ,
#st-control-3 : checked

.st- scroll #st-panel-3 h2 ,
#st-control-4 : checked

.st- scroll #st-panel-4 h2 ,
#st-control-5 : checked

.st- scroll #st-panel-5 h2 <
animation : moveDown 0.6s ease-in-out 0.2s backwards ;
>

@keyframes moveDown <
0% <
transform : translateY ( -40px ) ;
opacity : 0 ;
>
100% <
transform : translateY ( 0px ) ;
opacity : 1 ;
>
>

Параграфы будут иметь следующие стили:

В то время как заголовок будет двигаться вниз, параграф будет двигаться вверх:

.st- scroll #st-panel-1 p ,
#st-control-2 : checked

.st- scroll #st-panel-2 p ,
#st-control-3 : checked

.st- scroll #st-panel-3 p ,
#st-control-4 : checked

.st- scroll #st-panel-4 p ,
#st-control-5 : checked

.st- scroll #st-panel-5 p <
animation : moveUp 0.6s ease-in-out 0.2s backwards ;
>

@keyframes moveUp <
0% <
transform : translateY ( 40px ) ;
opacity : 0 ;
>
100% <
transform : translateY ( 0px ) ;
opacity : 1 ;
>
>

Для того, чтобы сделать наш макет немного симпатичнее, мы добавим класс color, который «инвертирует» цвета для секций и их элементов содержания:

.st- color ,
.st-deco <
background : #fa96b5 ;
>
.st- color [ data- icon ] :after <
color : #fa96b5 ;
>
.st- color .st-deco <
background : #fff ;
>
.st- color h2 <
color : #fff ;
text-shadow : 1px 1px 1px rgba ( 0 , 0 , 0 , 0.1 ) ;
>
.st- color p <
color : rgba ( 255 , 255 , 255 , 0.8 ) ;
>

И последнее, но не менее важное, мы добавим некоторые media queries для контроля положения и размера шрифта элементов для небольших экранов:

@media screen and (max-width: 520px) <
.st-panel h2 <
font-size : 42px ;
>

.st-panel p <
width : 90% ;
left : 5% ;
margin-top : 0 ;
>

.st-container > a <
font-size : 13px ;
>
>

@media screen and (max-width: 360px) <
.st-container > a <
font-size : 10px ;
>

.st-deco <
width : 120px ;
height : 120px ;
margin-left : -60px ;
>

[ data- icon ] :after <
font-size : 60px ;
transform : rotate ( -45deg ) translateY ( 15% ) ;
>
>

Для старых браузеров, которые не поддерживают некоторые селекторы мы хотим вернуться к классическому «target jump». Мы можем сделать это изменив некоторые стили (simple.css). В частности, мы установим свойство overflow для body равное «auto» и спрячем радио-кнопки, делая ссылки кликабельными (в аттрибуте href они имеют ID соответствующей панели):

И это все! Я надеюсь, вам понравился этот урок!

Демонстрация

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих