Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport


Содержание материала:

Теория адаптивной верстки

Адаптивная верстка сайта

Теоретическая часть

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

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

Термин адаптивный веб-дизайн был придуман Итаном Маркоттом. Итан объеденил три существующие методики (макет гибкой сетки, гибкие изображения и медиазапросы) в единый подход и назвал его адаптивным веб-дизайном.

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

Рисунок 2 – Внешний вид сайта web-grafika.pro на экранах с разным разрешением

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

По оценкам экспертов тенденция увеличения мобильного трафика сохранится, и степень проникновения мобильного интернета будет стремительно расти.

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

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

Гибкий «резиновый» макет

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

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

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

Ширину главного контейнера тоже необходимо перевести в проценты, обычно это 100%.

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

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

Все настольные современные браузеры используют 16px в качестве размера шрифта по умолчанию (если только другое значение не будет задано явным образом). Следовательно, изначальное применение любого из приведенных далее правил к тегу обеспечит одинаковый результат:

1em=16px, em определяет соотношение ширины/высоты конкретной буквы и размера конкретного шрифта в пунктах.

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

Заставить изображения масштабироваться пропорционально «резиновому» дизайну для современных браузеров не составляет особого труда. Для этого нужно лишь объявить в CSS следующее:

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

Более того, аналогичный атрибут и свойство могут быть применены к другим мультимедиа. Например:

Топ-пост этого месяца:  Урок 10. ES6 (EcmaScript 6). Классы

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

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

При создании адаптивных веб-дизайнов наиболее часто используемые медиазапросы касаются ширины областей просмотра устройств (width) и ширины экранов (device-width).

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

Можно задавать тип устройства в атрибуте media тега
. Для этого необходимо указать ссылку в тегах в HTML-коде:

В данном коде используется устройство с экраном (screen).

Можно задать ориентацию экрана устройства:

В данном коде выражение медиазапроса сначала спрашивает о типе устройства (с экраном), а затем – о характеристике (в книжной ориентации). Таблица стилей portrait-screen.css станет загружаться, если речь будет идти о любом устройстве с экраном в книжной ориентации.

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

В данном коде мы указали значение initial-scale 1.0, в результате чего мобильный браузер будет обрабатывать страницу, придавая ей размер равной 100% от величины своей области просмотра.

В медиазапросы включают стили, которые изменяются при определенных размерах экрана. Те стили, которые не изменяются не указывают:

Использование фреймворков

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

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

На сегодняшний день существует множество таких фреймворков:

  • Bootstrap
  • Skeleton
  • Foundation
  • Semantic UI
  • и другие.

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

Смотреть видео Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport онлайн, скачать на мобильный.

99 | 4
WebForMySelf | 11 мес. назад

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

Смотреть видео Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport онлайн, скачать видео.

99 | 4
WebForMySelf | 11 мес. назад

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

HTML: Viewport мета тег для не адаптивного дизайна сайта (non responsive design) опубликовал Радик Алиев категория HTML, CSS, jQuery
просмотры 52 330

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

Главное использование тега Viewport

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

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

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

Взгляните на сайт Themify на iPhone.

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

Если ваш проект является слишком узким, это может также вызвать проблемы. Допустим, ширина контейнера вашего дизайна 700px, и это не правильно, это будет выглядеть как на скриншоте слева, где есть большое пустое пространство справа.

Вы можете просто исправить это, установив ширину окна в 720px. Ширина вашего дизайна не меняется, но iPhone будет масштабировать, чтобы поместиться в 720px.

Распространенная ошибка

Распространенной ошибкой является то, что люди часто добавляют initial — scale = 1 на не отвечающий размерам дизайн. Это делает страницу в масштабе 100% без масштабирования. Если ваш проект не помещается на экран, пользователям придется уменьшить масштаб, чтобы увидеть полную страницу. Еще хуже, когда объединяют user — scalable = no или maximum — scale = 1 с initial — scale = 1 . Это будет отключать возможность масштабирования. Пользователи не имеют возможности уменьшить размер страницы, чтобы увидеть ее.

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

To download video: Right click on the following button and select «Save Link As»

Топ-пост этого месяца:  10 лучших сервисов для дизайнеров и веб-дизайна

To download mp3 (audio): Click «Download mp3» button

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

WebForMySelf

Share with Link:

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

meta viewport. Как он работает?

Статья, в которой познакомимся с метатегом viewport. Рассмотрим, какие значения может принимать атрибут content данного метатега, а также как его настроить для адаптивного и фиксированного сайта.

Что такое viewport?

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

Viewport (дисплей компьютера) Viewport (экран смартфона)

Размеры этой области определяются размером экрана устройства. Самую маленькую область просмотра (viewport) имеют смартфоны, размеры экранов которых колеблются от 4″ до 6″. А самую большую — мониторы компьютеров, размеры диагоналей которых могут превышать 24″.

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

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

Но и у адаптивной разметки появились проблемы после того как появились смартфоны с высокой плотностью пикселей и, следовательно с высоким разрешением. Чтобы более детально разобраться в этой ситуации рассмотрим следующий пример, в котором сравним 2 устройства.

Физическое разрешение смартфонов iPhone3 и iPhone4

Первое устройство — это смартфон Apple iPhone 3 (диагональ 3.5″). Данный телефон не имеет высокую плотность пикселей. У данной модели она составляет 163ppi (меньше 200ppi). Физическое разрешение данного смартфона составляет 320×480. Такое разрешение соответствует диагонали, если его сопоставить с разрешением мониторов настольных устройств (компьютеров). Т.е. на веб-странице этого смартфона, текст, выполненный размером 16px, будет также хорошо читаемым как на мониторе компьютера.

Второе устройство — это смартфон Apple iPhone 4. Он имеет диагональ такую же как у смартфона Apple iPhone 3, т.е. 3.5″. Но отличается от него тем, что имеет высокую плотность пикселей (326ppi). Следовательно, более высокое разрешение — 640×960 при тех же размерах экрана. Это приведёт к тому, что тот же самый текст и остальные объекты веб-страницы будут выглядеть в нём при тех же условиях в 2 раза меньше. Таким образом, текст будет реально выглядеть на 8px. Такая страница будет уже трудночитаемой. Чтобы сделать эту страницу пригодной для чтения, её представление необходимо увеличить в горизонтальном и вертикальном направлении в 2 раза (отмасштабировать).

Назначение метатега viewport

Метатег viewport был разработан компанией Apple для того, чтобы указывать браузерам на то, в каком масштабе необходимо отображать пользователю видимую область веб-страницы. Другими словами meta viewport предназначен для того, чтобы веб-страницы отображались (выглядели) правильно (корректно) на смартфонах, планшетах и других устройствах с высокой плотностью пикселей (>200ppi). Данный метатег предназначен в большой степени для адаптивных сайтов, но с помощью него можно улучшить представления веб-страниц, имеющих фиксированную или гибкую разметку.

Добавление meta viewport к веб-странице

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

Настройка meta viewport для адаптивных веб-страниц

Включение поддержки тега meta viewport для адаптивных сайтов осуществляется посредством добавления всего одной строчки в раздел head веб-страницы:

Атрибут name предназначен для того чтобы указать браузеру, какую именно информацию о странице хотим ему сообщить. В данном случае эта информация касается viewport.

Контент (содержимое) этих сведений указывается в качестве значения атрибута content посредством пар ключ-значение, разделённых между собой запятыми.

Для адаптивного дизайна значения атрибута content viewport должно определяться 2 параметрами:

    w >Рассмотрим каждый из них более подробно.

Первый параметр ( w >) отвечает за то, чтобы ширина видимой области веб-страницы равнялась CSS ширине устройству ( device-width ). Данная ширина (CSS) — это не физическое разрешение экрана. Это некоторая величина независящая от разрешения экрана. Она предназначена для того, чтобы мобильный адаптивный дизайн сайта отображался на всех устройствах одинаково независимо от их плотности пикселей экрана.

Например, смартфон iPhone4 с физическим разрешением 640×960 имеет CSS разрешение 320×480. Это означает то, что сайт с метатегом viewport ( w >) на этом устройстве будет выглядить так как будто бы это устройство имеет разрешение 320×480 (в данном случае вместо device-width будет подставляться значение 320px). Т.е. на один CSS пиксель будет приходиться 4 физических пикселя (2 по горизонтали и 2 по вертикали).

Топ-пост этого месяца:  Компания Mail.ru запускает новые виды облачных услуг

CSS разрешение смартфона iPhone4

Как же определить какое CSS разрешение будет иметь тот или иной экран устройства?

Определяется оно в зависимости от того какую экран имеет плотность пикселей. Если экран имеет плотность меньше 200ppi, то CSS-разрешение будет равно физическому. Если экран имеет плотность пикселей от 200 до 300 (ppi), то CSS-разрешение будет в 1.5 раза меньше физического. А если экран имеет плотность более 300ppi, то CSS разрешение будет определяться делением физического разрешения на некоторый коэффициент. Данный коэффициент определяется по формуле плотность/150ppi с округлением обычно до 2, 2.5, 3, 3.5, 4 и т.д.

Плотность пикселей экрана CSS коэффициент
меньше 200ppi 1
200 — 300 ppi 1.5
больше 300ppi плотность/150 (с округлением до 2, 2.5, 3, 3.5, 4 и т.д.)

Рассмотрим несколько примеров:

  • Apple iPhone 3: физическое разрешение 320×480, плотность пикселей — 163ppi. Плотность пикселей меньше 200, следовательно, CSS коэффициент равен 1. CSS разрешение будет равно физическому, т.е. 320×480.
  • Apple iPhone 6: физическое разрешение 750×1344, плотность пикселей — 326ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 326/150=2 (2.2 округляем до 2). CSS разрешение будет равно 375×667.
  • LG G4: физическое разрешение 1440×2560, плотность пикселей — 538ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 538/150=4 (3.6 округляем до 4). CSS разрешение будет равно 360×640.
  • Galaxy S3 mini: физическое разрешение 480×800, плотность пикселей — 233ppi. Плотность пикселей больше 200, следовательно, CSS коэффициент будет равен 1.5. CSS разрешение будет равно 320×533.
  • Galaxy S5: физическое разрешение 1080×1920, плотность пикселей — 441ppi. Плотность пикселей больше 300, следовательно, CSS коэффициент будет равен 441/150=3. CSS разрешение будет равно 360×640.

Второй параметр initial-scale — устанавливает первоначальный масштаб веб-страницы. Значение 1 означает то, что масштаб равен 100%.

meta viewport и не адаптивные страницы

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

Например, можно сделать так чтобы ширина страницы масштабировалась под ширину устройства (если ширина макета больше CSS ширины). Но учтите, что масштабирование работает только в разумных пределах.

Осуществляется это тоже с помощью установления параметру width значения device-width . Т.е. для не адаптивных сайтов в раздел head необходимо добавить следующую строчку:

Масштабирование неадаптивного дизайна под размер устройства (смартфона)

Кроме того, разработчики браузеров позаботились даже о тех, кому трудно добавить эту строчку. В этом случае экран устройства будет по умолчанию иметь CSS ширину, равную 980px. Это позволит отобразить без прокрутки (по ширине) большинство десктопных макетов сайтов.

Ширина по умолчанию viewport в браузере (если meta viewport не указан)

Если же необходимо фиксированный сайт отобразить в браузере мобильного устройства в обычном масштабе (не уменьшенном), то необходимо использовать следующий вид метатега viewport:

Дополнительные параметры meta viewport

Кроме основных параметров, тег meta viewport содержит много других.

Вот некоторые из них:

  • minimal-scale — задаёт минимальный масштаб;
  • maximal-scale — устанавливает максимальный масштаб;
  • user-scalable — указывает, может ли пользователь управлять масштабом или нет.

Примеры viewport с использованием дополнительных параметров:

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

Смотреть видео Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport на ВХайпе бесплатно

86 | 3
WebForMySelf | 11 мес.

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

Основные аспекты валидной адаптивной верстки?

Видео Типичные приёмы адаптивной вёрстки

Это лучший ответ на вопрос! SergeyStavr[2] заработала 75 рублей!

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

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

Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport

Смотреть видео Урок 1. Теория и практика адаптивной верстки. Мета тег Viewport онлайн, скачать на мобильный.

99 | 4
WebForMySelf | 11 мес. назад

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

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

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

Урок 2. Теория И Практика Адаптивной Верстки. Медиа-Запросы. Часть 1. Webformyself 13:30 HD

23.12.2020 14:52 2020-12-23T11:52:14.000Z

Описание:

Полный курс по теории и практике адаптивной верстки смотрите тут: https://webformyself.com/category/premium/htmlcss-premium/responsive-premium/

В этом уроке мы приступим к изучению медиа-запросов, которые являются неотъемлемой частью в адаптивной верстке и позволяют в зависимости от условия выполнять тот или иной css код.

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

Добавить комментарий