Адаптивная верстка уроки: Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков

Содержание

Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков

Будь вкурсе свежих уроков!

В категории: Курсы Frontend — HTML, CSS и JavaScript

Будь вкурсе самого свежего материала. Где мы отправляем статьи, видео и много чего интересного.

https://youtube.com/watch?v=Yh3XYrbz-S0

4 318 просмотров

В данном курсе будет показан более продвинутый процесс вёрстки сайтов с использованием Sass (метаязык на основе CSS). К тому же автор будет использовать GIT (система управления версиями). Вёрстка сайта и написание кода автор будет делать в редакторе VS Code а работа с макетом PSD будет производится в программе Avocode.

Первые 2 урока будут посвящены настройке VS Code и Avocode. С 3 по 9 урок практические занятия, автор на практике будет показывать, как сверстать адаптивный лендинг на примере реального заказа. Цель курса показать упрощённый метод вёрстки адаптивных и современных сайтов.

Что такое адаптивная вёрстка

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

Когда популярность мобильных устройств возросла, увеличился мобильный трафик, что привело к тому что сайты требовали к себе отзывчивое отображение. Более того, вскоре как мобильный трафик превысил процент заходов с ПК, поисковые системы Google и Яндекс поставили привилегии для сайтов с адаптивной вёрсткой и быстрой загрузкой. Со временем адаптивный дизайн стал важным требованием при разработке сайтов.

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

Адаптивная вёрстка с технической точки зрения

Сама вёрстка начинается с максимального расширения экрана – 1920х1080px. Когда сайт полностью свёрстан, начинается подгонка под различные расширения экрана, в этом вам может помочь браузер Google Chrome. В данном браузере существует консоль, которая помогает отследить как визуально выглядит сайт на различных размерах экрана. Достаточно нажать клавишу на клавиатуре F12, либо нажать правой кнопкой мыши на нужный элемент и выбрать «Просмотреть код» и браузер выведет HTML-разметку и CSS-свойства элементов.

Во многих современных браузерах есть консоль для просмотра кода, где вы в режиме реального времени можете изменить любые стили CSS или HTML-разметку. Браузер Chrome и Яндекс.Браузер предлагает широкий набор для разработчиков, к примеру, можно найти ошибки в JS-коде или найти нужный фрагмент HTML-разметки.

Метатег viewport для адаптивной вёрстки

Пример метатега, который адаптирует сайт под мобильную вёрстку:

<meta name="viewport" content="width=device-width, initial-scale=1">

Данный тег ставиться внутри тега <head></head> где содержаться заголовки HTML страницы. Основные настройки хранятся внутри атрибута content, где width определяет до какой ширины будет сужаться сайт, например width=768px означает что весь контент сайта будет сжиматься до 768px, но в случае если один из элементов будет шириной к примеру 1200px, то при ширине окна 768px мы увидим горизонтальную полосу прокрутки. width=device-width – означает что сайт будет автоматический подстраивается под ширину окна браузера.

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

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

@media(max-width:1600px){
body{font-size:16px;}
}
@media(max-width:1200px){
body{font-size:14px;}
}

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

Вы можете поделиться или сохранить для себя этот урок в социальных сетях:

Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов

Отзывчивый дизайн — Изучение веб-разработки

На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция отзывчивого (адаптивного) веб-дизайна (responsive web design (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.

В какой-то момент истории при разработке веб-сайта у вас было два варианта:

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

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

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

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

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

Примечание: Скриншоты выше сделаны используя Responsive Design Mode в Firefox DevTools.

Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие m.example.com или example.mobi). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.

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

Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост Resolution dependent layout, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.

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

Термин адаптивный дизайн был Придуман Итаном Маркоттом в 2010 году и описывал использование трёх методов в сочетании.

Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта — Fluid Grids (опубликовано в 2009 в A List Apart).
Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.

Очень важно понять, что адаптивный веб-дизайн — это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

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

Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}

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

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

Узнать больше о медиавыражениях можно в документации MDN.

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

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

В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование floats. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.

target / context = result

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

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

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

На более широких экранах они перемещаются в два столбца:

Современные методы макетов такие как Макет с несколькими столбцами, Flexbox, и Grid являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.

Multicol

Самый старый из этих методов — это multicol, когда вы задаёте column-count, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.

.container {
  column-count: 3;
}

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

.container {
  column-width: 10em;
}

Flexbox

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

В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись flex: 1 как описано в главе Flexbox: Гибкое изменение размеров flex элементов.

.container {
  display: flex;
}

.item {
  flex: 1;
}

Примечание: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: пример, исходный код.

CSS grid

В макете CSS Grid единицы измерения fr позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером 1fr. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе Гибкие grids с единицами fr.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Примечание: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: пример, исходный код.

Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:

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

Отзывчивые изображения, используя элемент <picture> и атрибуты srcset и sizes элемента <img> оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.

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

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

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

В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

html {
  font-size: 1em;
}

h2 {
  font-size: 2rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 4rem;
  }
}

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

В мобильных версиях заголовок меньше:

На компьютерах, однако, мы видим больший размер заголовка:

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

Using viewport units for responsive typography

An interesting approach is to use the viewport unit vw to enable responsive typography. 1vw is equal to one percent of the viewport width, meaning that if you set your font size using vw, it will always relate to the size of the viewport.

The problem with doing the above is that the user loses the ability to zoom any text set using the vw unit, as that text is always related to the size of the viewport. Therefore you should never set text using viewport units alone.

There is a solution, and it involves using calc(). If you add the vw unit to a value set using a fixed size such as ems or rems then the text will still be zoomable. Essentially, the vw unit adds on top of that zoomed value:

h2 {
  font-size: calc(1.5rem + 3vw);
}

This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.

If you look at the HTML source of a responsive page, you will usually see the following <meta> tag in the <head> of the document.

<meta name="viewport" content="width=device-width,initial-scale=1">

This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.

Why is this needed? Because mobile browsers tend to lie about their viewport width.

This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.

The trouble is that your responsive design with breakpoints and media queries won’t work as intended on mobile browsers. If you’ve got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you’ll never see your narrow screen layout on mobile. By setting width=device-width you are overriding Apple’s default width=960px with the actual width of the device, so your media queries will work as intended.

So you should always include the above line of HTML in the head of your documents.

There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.

initial-scale: Sets the initial zoom of the page, which we set to 1.
height: Sets a specific height for the viewport.
minimum-scale: Sets the minimum zoom level.
maximum-scale: Sets the maximum zoom level.
user-scalable: Prevents zooming if set to no.

You should avoid using minimum-scale, maximum-scale, and in particular setting user-scalable to no. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.

Note: There is a CSS @ rule designed to replace the viewport meta tag — @viewport — however, it has poor browser support. When both are used the meta tag overrides @viewport.

Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.

It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.

Адаптивный макет на флексбоксах | WebReference

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

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

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

<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (max-width: 575px) {
#main {
display: block;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>

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

В любом случае вот что мы добавили в код.

@media screen and (max-width: 575px) {
  #main {
    display: block;
  }
}

Всё, что мы здесь сделали, это изменили display: flex на display: block для элемента #main, чтобы его дочерние элементы перестали быть флекс-элементами. Это приводит к тому, что они накладываются друг на друга в исходном порядке.

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

<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (max-width: 575px) {
#main {
flex-direction: column;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>

Вот что мы сделали взамен.

@media screen and (max-width: 575px) {
  #main {
    flex-direction: column;
  }
}

Итак, теперь у нас идёт навигационная панель, статья, затем боковая панель. Но заметьте, что навигация и боковая панель располагаются выше, чем в предыдущем примере. Это странно!

На самом деле, так происходит из-за этого фрагмента кода.

#main > nav, 
  #main > aside {
  flex: 0 0 20vw;
  background: beige;
}

В частности, код flex: 0 0 20vw устанавливает для flex-base значение 20vw, что составляет 20% от ширины области просмотра. Ранее мы применяли это значение для ширины элементов, но теперь, когда значение flex-direction задано как column, оно используется для высоты.

Если мы хотим, чтобы высота была основана на содержимом, то можем изменить это значение на auto или вообще удалить строку.

<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (max-width: 575px) {
#main {
flex-direction: column;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>

Сначала мобильные

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

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

<!doctype html>
<title>Пример</title>
<style>
* {
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
margin: 0;
}
#main {
display: flex;
flex: 1;
flex-direction: column;
}
#main > article {
flex: 1;
}
#main > nav,
#main > aside {
background: beige;
}
#main > nav {
order: -1;
}
header, footer {
background: yellowgreen;
height: 20vh;
}
header, footer, article, nav, aside {
padding: 1em;
}
@media screen and (min-width: 576px) {
#main {
flex-direction: row;
}
#main > nav,
#main > aside {
flex: 0 0 20vw;
}
}
</style>
<body>
<header>Шапка</header>
<div>
<article>Статья</article>
<nav>Навигация</nav>
<aside>Боковая панель</aside>
</div>
<footer>Подвал</footer>
</body>

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

@media screen and (min-width: 576px) {
  #main {
    flex-direction: row;
  }
  #main > nav, 
  #main > aside {
    flex: 0 0 20vw;
  }
}

А весь остальной код идёт перед ним.

Обратите внимание, что медиа-запрос на этот раз использует min-width, чтобы соответствовать всем устройствам указанной ширины и больше. В предыдущем примере мы использовали max-width, чтобы соответствовать только устройствам, которые были указанной ширины или меньше.

Итак, мы установили для начального макета значение flex-direction как column, а для больших устройств как row. Мы также вернули обратно flex-basis для больших устройств.

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

уроки или сразу в бой? Создание левой панели

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

Устанавливаем базовое форматирование

Теперь перейдём к CSS-оформлению, чтобы задать документу начальное оформление.

Откройте style.css
и добавьте туда строки кода, которые встретите ниже.

Убираем отступы и поля на странице по умолчанию:

*
{
margin: 0px;
padding: 0px;
}

Устанавливаем цвета ссылок в зависимости от поведения пользователя (навёл курсор, не навёл, посетил) и убираем подчёркивание у ссылок, над которыми находится указатель мыши:

A:link {
color: #D72020;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:visited {
color: #D72020;
}

Настраиваем основное оформление страницы: прописываем фоновый цвет и изображение-подложку (картинке задаём горизонтальное заполнение), устанавливаем цвет, стиль и размер шрифта:

Body {
background: #FFD723 url(images/back_all.jpg) repeat-x;
font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
color: #333333;
}

Определение блока content:

#content {
margin: 0 auto;
background: #ffffff;
width: 786px;
text-align: left;
}

Вот теперь можно обновить страницу. Она заполнена рисунком-подложкой. Пока единственное видимое изменение, за которое отвечает свойство background
класса body
.

Оформляем горизонтальное меню

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

Начнём, конечно, с шапки. Которая, в свою очередь, состоит из блоков горизонтального меню и логотипа.

Сначала зададим общее оформление обоих элементов шапки: выравнивание текста по левому краю, белый фон и высоту 306px:

#header {
background: #ffffff;
height: 306px;
text-align: left;
}

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

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

Внесём первые коррективы: зададим левую границу в 2 пикселя толщиной, ширину и высоту нашего меню, а также повторяющийся по оси X фоновый рисунок:

#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top.gif) repeat-x;
}

Страница в обозревателе тут же преобразится и будет выглядеть так.

Теперь можно добавить и само меню в файл index.html
:

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

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

#menu a {
float: left;
width: 99px;
height: 46px;
display: block;
text-align: center;
text-decoration: none;
color: #ffffff;
font-weight: bold;
font-size: 14px;
padding-top: 35px;
}
#menu a:hover {
color: #D72020;
text-decoration: underline;
}

Теперь форматирование меню можно сопоставить с PSD-шаблоном.

Обратите внимание, как меняется оформление пункта, если подвести к нему указатель (за это отвечают правила #menu a:hover
).

Настраиваем логотип

Логотип у нас уже есть и лежит в папке, остаётся добавить его на страницу и отформатировать правилами. И то, и другое можно сделать средствами CSS, чем мы и не преминем заняться.

#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}

Логотип вставлен ровно по размеру.

Единственное, чего ему не хватает, так это текста. Вставим недостающее в блок logo
файла index.html
, чтобы получилось:

Слоган сайта

Текст появился, но его тоже нужно оформлять.

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

#logo a {
text-decoration: none;
text-transform: lowercase;
font-style: italic;
font-size: 36px;
color: #FFFFFF;
}
#logo h3 a
{
font-size: 24px;
}

Пояснять здесь ничего не нужно, со всеми свойствами вы знакомы ещё из уроков CSS. Однако внешний вид текста изменился, и в целом шапка теперь выглядит даже лучше, чем на PSD-макете.

Верстаем основную часть страницы

Далее настраиваем самый большой блок, на котором будет размещён весь уникальный контент. Он будет занимать 500px и располагаться в правой части сайта. Установим правила позиционирования, оформления заголовков, абзацев и ссылок (обо всех свойствах мы уже говорили в статьях по CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}
#right h5
{
margin: 0;
padding: 0px;
font-size: 12px;
color: #D72020;
}
#right a
{
color: #D72020;
text-decoration: none;
}
#right p {
margin: 0;
padding: 0;
padding-bottom: 10px;
}
#right h3 {
margin: 0;
padding: 0;
padding-top: 10px;
color: #D72020;
}

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

Заполним контейнер right
. Изображения поместим в простую таблицу.

Галерея

Кухни

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

Создание левой панели

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

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

В файл CSS впишите следующий код.

#left
{
padding: 10px;
width: 237px;
padding-right: 1em;
}
#left h4
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}
#left ul {
margin: 0;
padding: 10px;
list-style: none;
width: 100px;
font-size: 18px;
}
#left li ul {
position: absolute;
left: 90px;
top: 0;
display: none;
}
#left ul li {
position: relative;
margin-bottom:20px;
}
#left ul li a {
display: block;
text-decoration: none;
color: #ffffcc;
background: #ff9900;
padding: 5px;
border: 1px solid gold;
border-bottom: 0;
}
#left li:hover ul {
display: block;
}
#left li li {
margin-bottom:0px;
width: 150px;
}
#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

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

В контейнер left HTML-документа добавим сначала информационный блок без меню.

Информация

Мы предлагаем Вам праздничные скидки. Далее…

Галерея
Кухни
Кровати
Стенки
Прихожие
Шкафы-купе
Компьютерные столы
Договор
Прайс
Кухни
Кровати
Стенки
Прихожие
Шкафы-купе
Компьютерные столы
Образцы
Стекло
ДСП
Фурнитура
И т.д.
Контакты
Важно

Здравствуйте, меня зовут Александр Зеленин , и я веб-разработчик.
Многократно я слышал мнение, что верстка — удел начинающих frontend’еров. Хотя фактически это важнейшая часть любого (почти) веб-проекта. Это то, что пользователи видят в первую очередь. На текущий момент качественная вёрстка (особенно проектирование блоков) в крупном проекте требует большого количества различных навыков.

В данной статье представляю схему развития верстальщика

[большая по клику]
Само собой, это не всеобъемлющая и единственно верная схема. Есть ещё целая гора связанных навыков, релевантных технологий и так далее. Градация является субъективной.

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

Чего мы ожидаем?

В первую очередь необходимо понять, чего мы ожидаем от человека на каждом из уровней. Ваши ожидания могут отличаться.
Junior
— знает основные теги, может подправить контент на готовом html сайте, умеет грамотно форматировать текст, без проблем вставит встраиваемый элемент (ролик с ютуба, яндекс карту), ведёт работу через систему контроля версий только для себя (master, 1 контрибьютор). Может сверстать что-то несложное с нуля, и оно даже не поедет (лично у него). В целом не является самостоятельной единицей и требует руководства свыше.
Middle
— более-менее автономная единица (либо полностью автономная для малых и средних проектов). Может хорошо сверстать сайт средних размеров, и он будет корректно отображаться во всех актуальных версиях браузеров. Понимает, как работают шаблонизаторы, и может их использовать (при условии предоставления остального кода). Умеет планировать и документировать свою работу и оценивать сроки. Понимает важность поддержания стиля кода. Понимает, зачем есть грид-системы и css фреймворки. Умеет брать всю необходимую информацию из макетов от дизайнера. Может взаимодействовать с небольшой командой, создавать ветки и пулл-реквесты.
Senior
— может спроектировать систему блоков для крупного проекта. Знает, как избежать повторов и проблемных мест при использовании его кода другими разработчиками. Умеет декомпозировать сложные задачи и грамотно формулировать задачи. Умеет применять минимум одну методологию разработки (например, БЭМ). Может сделать так, чтобы проект открывался максимально быстро. Хорошо понимает несколько популярных шаблонизаторов. Способен написать сборщики и автоматизировать процесс, с этим связанный. Может проводить код ревью и курировать других верстальщиков.
Рассмотрим теперь чуть конкретнее, что включает в себя каждый из блоков на каждом уровне.

Junior

HTML
— знание основных тегов, аттрибутов. Понимание, как его писать в принципе.
Типографика
— умение отформатировать текст. Текст — основа практически любого проекта. Вставка неразрывных пробелов где надо, выделение жирным, курсивом, abbr и так далее. Можно использовать типограф или схожий сервис, но уметь понимать результат.
Семантика
— понимание, что для определённых задач есть определённые теги. Уметь выбрать нужный тег.
Медиа
— какие виды медиа можно встраивать в страницу.
Iframe
— встраивание сторонних виджетов (видео, аудио, карты и т.п.).
Аудио, Видео
— можно отложить изучение, т.к. частично решаются с помощью iframe. Понимать, какие форматы умеет воспроизводить браузер, как оформить плеер и так далее.
Картинки
— какие графические форматы и в каком виде воспринимает браузер. Плюсы и минусы использование тех или иных форматов.
Растр
— jpg, png, gif. Понимать различие форматов и уметь применять что и где надо.
SVG
— можно отложить изучение, т.к. применяется реже, чем хотелось бы. Понимать плюсы, минусы, ограничения и т.п.
Шрифты
— можно отложить изучение. На самом деле довольно сложная тема, и в общем случае я бы советовал начинающим использовать системные шрифты. Уметь подгрузить шрифты, оптимизировать отображение, минимизировать лаг отрисовки с кастомными шрифтами.
Табличная вёрстка
— опционально. Для желающих верстать качественные email-рассылки в будущем.
CSS 1
— шрифты, цвета, выравнивание, размеры.
CSS 2.1
— управление поведением блоков, позиционирование, полноценное оформление.
Селекторы
— простые селекторы на тег, класс, вложенный элемент. Простые псевдоселекторы типа:hover.
Именование
— как называть классы, чтобы не было мучительно больно.
Блочная вёрстка
— разбить картинку на осознанные блоки, воплотить блоки в HTML, оформить с CSS.
Браузеры
— можно отложить изучение. Какие браузеры существуют, в чём их различие.
Инструменты разработчика
— можно отложить изучение. Использовать инструменты браузеров, чтобы разбираться в проблемах отображения.
Текстовые редакторы
— какие текстовые редакторы для разработчиков есть и зачем. SublimeText и Notepad++ приведены для примера, как хорошо мне знакомые. Уметь настраивать в них базовые вещи, такие как отступы, перенос строки и так далее.
Системы контроля версий
— я лично считаю умение их использовать хотя бы индивидуально, лично для себя, очень важным. Понимать, для чего эти системы созданы и какие бывают.
Git
— понимать в общих чертах задачу и принципы самой популярной системы контроля версий.
Github / bitbucket
— уметь использовать одну из популярных площадок для git.
Checkout / commit / push / pull
— базовые операции для личного использования.
Stash
— для временного сохранения ненужных в данный момент данных.
10 работ
— сделать минимум 10 работ в различном дизайне. Можно тестовых, это не важно. Важно, чтобы полноценных в рамках текущих знаний.

Middle

CSS 3
— градации, тени, сглаживание, фильтры, трансформации.
Продвинутые селекторы
— элементы, следующие за опделённым (+), определённый по счёту (nth-child), shadow-dom, before/after и так далее.
Анимации
— опционально. transition и animation. Плавные переходы, анимации. Понимать ограничения и минусы.
Сетки
— зачем существуют, как выстраивать, какие есть готовые решения. Для примера можно посмотреть Flexbox grid или любой другой, который найдёте.
Фреймворки (CSS)
— зачем нужны, как применять. Желательно научиться хорошо использовать минимум один. Очень пригождается для прототипирования. Значительно повышает качество проекта при отсутствии бюджета на дизайн (не уникально, но юзабельно).
CSS препроцессоры
— можно отложить изучение. Оптимизация работы, более красивый и читабельный код. Переменные, миксины и т.п. Поработать с одним или несколькими популярными препроцессорами типа SASS, LESS, Stylus.
Media queries
— можно отложить изучение. Отображение нужных стилей в зависимости от условий (устройство, размер экрана, плотность пикселей, версия для печати и т.п.).
Стиль кода
— понять, для чего есть соглашения по стилям, изучить и начать применять любой (рекомендую от AirBNB).
DRY / KISS / SOLID
— можно отложить изучение. Понять важные принципы разработки, ощутимо упрощающие дальнейшее сопровождение проекта.
OOCSS
— опционально. Понять, что есть объектно-ориентированный css и для чего он. В том или ином виде используется во многих проектах (хоть и без понимания, что это он). В идеале, научиться проектировать. Может отлично зайти для крупных проектов.
Документация
— понять, что и как документировать. Документировать. Можно отложить, но в будущем обязательно изучить разметку markdown.
Планирование
— научиться оценивать сроки по картинке и определять последовательность работ.
Декомпозиция
— можно отложить изучение. Научиться разбивать задачу на подзадачи. Это сложнее, чем кажется:-)
Постановка задач
— можно отложить изучение. Научиться чётко описывать задачи текстом так, чтобы другие разработчики, в том числе с меньшей квалификацией, достаточно однозначно понимали, что необходимо сделать для их выполнения.
Flexbox
— понимание модели, умение применять полноценно.
Вёрстка писем
— опционально. В целом навык не лишний. Понимать особенности почтовых систем, сохранить хороший внешний вид и не упасть в спам (если это не спам).
Полифилы
— разобраться, как использовать самые актуальные возможности разработки, сохраняя обратную совместимость. Понять минусы и плюсы от такого подхода.
Кроссплатформенная вёрстка
— понимать, что нужно делать, чтобы проект хорошо выглядел не только под Windows, Linux и Mac, но и под SmartTV или PS.
Кроссбраузерная вёрстка
— понимать разницу рендера браузеров и заставлять их показывать одинаково. Сайт CanIUse очень помогает в этом.
Мобильная вёрстка
— можно отложить изучение. Понимать, какие ограничения несут в себе мобильные платформы. Использовать лимитированное пространство грамотно.
Оптимизация
— можно отложить изучение. Разобраться в «цене» тех или иных приёмов. Понять, из каких фаз состоит отображение сайта пользователю. — можно отложить изучение. Оптимизации, связанные с размером, кешем, сжатием, объединением ресурсов и т.п.
Отрисовка
— можно отложить изучение. Оптимизации, связанные со скоростью рендера после загрузки.
SEO
— можно отложить изучение. Хотя бы базовое понимание работы поисковых систем. Умение «помочь» поисковой системе разобраться, куда смотреть и что важно.
Шаблонизаторы
— разобраться, каким образом можно переиспользовать код, группировать элементы и компоновать страницы. Очень желательно изучить как серверный рендеринг, так и клиентский. Сюда же входят шаблоны на «чистом» языке (типа простых PHP вставок). Работа «до» (dataflow) шаблонизатора нас не интересует.
PHP
— можно отложить изучение. Разобраться в базовом синтаксисе и уметь внести мелкие правки, связанные с оформлением страницы.
CMS
— можно отложить изучение. Узнать, какие CMS существуют и для чего они были созданы. Научиться писать шаблоны хотя бы для одной (рекомендую WordPress).
Javascript
— можно отложить изучение. Изучить базовый синтаксис, понять, как вешать простейшие обработчики и проводить простую работу с DOM.
jQuery
— можно отложить изучение. Научиться экономить кучу времени для решения довольно типовых задач с использованием плагинов для самой популярной js библиотеки (после vanilla.js, конечно).
NodeJS
— можно отложить изучение. Разобраться, как запустить простейший сервер, раздавать статику и рендерить на стороне сервера. Можно использовать Express или любой другой фреймворк.
Сборка
— опционально. Научиться собирать проект из кучи CSS / HTML файлов в то, что нужно. Рекомендую ознакомиться хотя бы с grunt и gulp, как представителями «разных» лагерей.
IDE
— опционально. Изучить, зачем нужны IDE и как их использовать. Перейти на использование какого-либо IDE для экономии времени. Важно: изучение IDE сравнимо с полноценным изучением языка программирования, и вкладывание большого количества времени в это может не оправдаться. Лично я пользуюсь текстовыми редакторами (и только для ооочень крупных проектов включаю IDE).
Branching
— научиться управлять ветками в git.
Merge
— научиться сливать ветки с разрешением конфликтов.
Fetch / Rebase
— разобраться, зачем они, когда их применять, и начать применять по необходимости.
Графические редакторы
— разобраться, какие бывают, для чего. Чем векторные отличаются от растровых. Важно понимать редактор хотя бы на уровне «чтения» макета от дизайнера. Выбрать правильный шрифт, размер, цвет и т.п. Чтобы не на глаз, а точно. Рекомендую поработать минимум с 1 растровым (Photoshop) и 1 векторным (Figma).
50 работ
— к концу этапа у вас порядка 50 различных работ, демонстрирующих навыки из изученных областей.

Senior

Хоть на схеме и кажется маленькой эта группа, но фактически она самая большая. Т.к. к этому моменту необходимо изучить всё то, что откладывалось.
Адаптивная / Отзывчивая вёрстка
— разобраться в высшей ступени и скомбинировать все полученные до этого знания. Проект должен выглядеть хорошо везде и на всём (в рамках разумного).
Постепенная деградация / Прогрессивное улучшение
— понять, что это и зачем. Использовать.
Gitflow
— уметь объяснить другим разработчикам, как создавать ветки, куда их вливать, как, уметь провести код ревью (вёрстки, само собой, не кода).
БЭМ
— опционально. Разобраться в методологии, позволяющей создавать безлимитно крупные проекты так, чтобы при минимальной синхронизации различные команды могли использовать блоки друг друга. Есть и другие методологии, дающие не худший результат. К этому моменту о них вы так или иначе будете знать и сможете, при желании, изучить.
100 работ
— иметь суммарно сотню работ, демонстрирующих различные полученные навыки. На самом деле, это всё условно. Можно иметь одну работу (состоящую из различных частей) в портфолио, которая уже покажет, что вам ничего не страшно.

Заключение

Фактически многие из этих тем небольшие. Однако держать кучу различных факторов в голове очень сложно. За 15 лет я общался менее чем с десятью верстальщиками (да и вообще программистами), которых отнёс бы к категории Senior (верстальщиков, программистов хороших было сильно больше).
Навскидку – на полноценное изучение и практику только вёрстки с нуля вполне можно затратить год (и более, если уходить в проектирование компонентов).

Надеюсь, тем, кто находится в начале пути, схема подскажет, куда можно ещё двигаться, и что не обязательно сразу (а можно и вообще не двигать в него) бежать в программирование.

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

Кроссбраузерная адаптивная верстка html css

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

Основные браузеры

Существует пять основных браузеров: Chrome, Opera, Safari, Internet Explorer, Mozilla Firefox. При разработке сайта, обязательно проверяйте его во всех этих браузерах.

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

Вендорные префиксы

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

-o- — префикс для браузера Опера

-moz- — префикс для браузера Mozilla

-ms — префикс для Internet Explorer

-webkit- — префикс для браузеров, построенных на движке Webkit, таких, как Safari и Chrome

Пример с вендорными префиксами:

-webkit-transition-duration:0.6s;

-moz-transition-duration:0.6s;

-o-transition-duration:0.6s;

-ms-transition-duration:0.6s;

transition-duration:0.6s;

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

Стандартные стили браузера

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

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

reset.css

Американец Эрик Майер написал css-документ reset.css, в котором все стили обнуляются. Убираются отступы и границы всех элементов веб-страницы, удаляются маркеры, а также всем элементам задается одни размер шрифта.

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

normalize.css

Немногим позднее американские разработчики Николас Галахер и Джонатан Нил создали css-документ normalize.css, в котором вместо полного обнуления всех стилей происходит их нормализация. То есть, полезные настройки браузера сохраняются, разработчику не нужно тратить время на то, чтобы заново прописать стили для абсолютно всех элементов, так как они унифицируются для всех браузеров. Более того, normalize.css исправляет несовместимости браузера Internet Explorer для версий IE9 и выше, а также ошибки в популярных браузерах.

Этот css-документ использует популярный фреймворк Bootstrap.

Оба файла – reset.css и normalize.css распространяются бесплатно.

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

Назад

FAQ и лучшие практики по реализации адаптивного веб-дизайна

Google официально объявил адаптивный веб-дизайн приоритетным инструментом для создания мобильных версий сайтов. Если у вас есть сайт или блог, пора серьёзно задуматься о переходе на адаптивный дизайн вместо того, чтобы поддерживать разные версии сайта для телефонов и планшетов.

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

Почему я должен переходить на адаптивный дизайн?

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

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

Вы экономите время и деньги, поскольку вам не нужно поддерживать несколько сайтов отдельно для экранов компьютера и для экранов мобильных телефонов.
Благодаря адаптивному дизайну вырастет поисковая оптимизация сайта (SEO), поскольку у каждой страницы будет один и тот же URL. Вам не нужно будет беспокоиться о том, что некоторые ссылки будут вести на мобильную версию сайта, а другие — на десктопную.
В отчётах Google Analytics показатели сайта будут выше, поскольку результаты запросов с мобильных телефонов и с ПК будут синхронизированы.
То же самое касается статистики распространения в соцсетях (лайки в фейсбуке, твиты и т.п.), так как у мобильной и десктопной версии сайтов будет одинаковый URL.
Сайты с адаптивным дизайном гораздо легче поддерживать, поскольку они не требуют каких-либо серверных компонентов. Нужно лишь модифицировать базовые CSS-стили страницы для изменения внешнего вида (или положения на странице) в зависимости от конкретного устройства.

Что нужно знать перед началом работы с адаптивным дизайном?

Адаптивный дизайн использует чистый HTML и CSS. Вы задаёте правила в CSS, которые меняют стиль в зависимости от размера экрана устройства пользователя.

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

Как можно узнать, был ли использован адаптивный дизайн для отдельно взятого сайта?

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

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

В большинстве случаев — будет. В адаптивном дизайне используются медиазапросы CSS3 и HTML5 (для улучшенной семантики), которые не поддерживаются в более старых версиях IE. Однако можно найти выход, используя решения JavaScript — respond.js и другие средства модернизации, которые адаптируют CSS3 и HTML5 под более старые версии, включая IE6.

Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?

Если на вашем сайте присутствуют рекламные объявления, вам нужно особенно внимательно подходить к выбору их форматов, потому что широкие блоки (например, баннеры размером 728×60 px) могут не помещаться на экране телефона размером 320px. Мы предпочитаем использовать стандартные прямоугольные блоки (например, 300×250), поскольку они легко подстраиваются как под экраны мобильных устройств, так и под мониторы ПК.

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

Мы бы посоветовали задать как минимум следующие параметры разрешений для медиазапросов в CSS3: 320px (iPhone, ландшафтный режим), 480px (iPhone, портретный режим), 600px (планшеты Android), 768px (iPad и планшеты Galaxy Tab) и 1024px (ландшафтный режим iPad и рабочий стол ПК).

Как мне начать работать с адаптивным веб-дизайном? Есть ли какие-нибудь хорошие туториалы?

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

Есть ли какие-то недостатки в использовании адаптивного дизайна?

Лишние килобайты на веб-странице, поскольку нужно будет загружать CSS стили и файлы JavaScript, которые в других случаях не нужны.
Изображения. В адаптивном веб-дизайне сложно добиться размещения изображений в высоком разрешении на мобильной версии сайта (если только вы не используете обходные серверные решения наподобие Adaptive Images или Sencha).
Чтобы добавить адаптивность к существующему сайту, придётся потрудиться. Иногда проще заново создать сайт, чем переделать его под адаптивный дизайн.

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

Перевод статьи «Best Practices of Responsive Web Design»

Семантическая верстка

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

И при всем этом семантическую верстку все так же очень просто понять, как и все предыдущие уроки.

Семантическая верстка предназначена для того, чтобы поисковые системы (Яндекс, Google и др.) лучше понимали, что и где находится на Вашем сайте. Семантический HTML-код показывает поисковику, где находится шапка сайта, где основное содержимое, где навигация и т.д.

Взгляните на следующий код:

<div></div>
<div></div>
<div></div>

Здесь header, main и footer это только идентификаторы, они указаны исключительно для Вас, чтобы Вы могли ими управлять через CSS. Поисковику совершенно без разницы, как Вы их назвали.

Для семантической верстки код должен выглядеть так:

<header></header>
<main></main>
<footer></footer>

В вот теги <header>, <main>, <footer> уже говорят поисковику о своей семантике. И неважно есть у них идентификатор или нет. Повторю, что id и class Вы указываете только для себя.

Измените код в Вашем index.html на следующий:

<!DOCTYPE html>
<html>
	<head>
	    <title>Заголовок страницы</title>
	    <link rel="stylesheet" href="style.css">
	</head>
	<body>
	    <header>
                <h2>Мой первый сайт</h2>
            </header>
	    <main></main>
	    <footer></footer>
	</body>
</html>

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

Это сейчас неважно. Важно, что Вы узнали о семантической верстке. А это действительно необходимо, так как все сайты борются за попадание в топ-3 Яндекса и Google. И при этом важны все нюансы веб-разработки.

Адаптивная компоновка | raywenderlich.com

Доступна обновленная версия этого курса, созданная для Swift 4, iOS 12, Xcode 10.
Посмотреть последнюю версию

14 декабря 2015 г. · Видеокурс (1 час 17 минут) · Начинающий

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

Узнайте, что описано в нашей серии видеоуроков по Adaptive Layout.

Узнайте о классах размеров, основной концепции адаптивного макета, и изучите основы работы с классами размеров в Interface Builder.

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

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

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

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

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

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

Просмотрите то, что вы узнали из нашей серии видеоуроков по Adaptive Layout, и узнайте, какие еще ресурсы вам следует изучить.

Авторы

Джерри Бирс

Джерри — соучредитель Five Pack Creative, компании по разработке мобильных приложений, специализирующейся на разработке для iOS.Он работал над …

Инструктор

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

Бесплатный онлайн-курс: основы адаптивного веб-дизайна от Udacity

Обзор

Этот курс состоит из 5 уроков. Первый представляет собой обзор адаптивного дизайна и знакомит с тем, как вам нужно изменить свое мышление при переходе от дизайна для настольных компьютеров к адаптивному дизайну. Уроки 2, 3, 4 и 5 охватывают важные теоретические концепции адаптивного дизайна и включают множество практических упражнений, реализующих то, что вы узнали.

Урок 1 — Почему отзывчивый?

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

Охваченные темы:

Что такое адаптивный дизайн?
Почему адаптивный дизайн работает на любом устройстве?
Удаленная отладка и эмуляция в браузере

Урок 2 — Начиная с малого

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

Охваченные темы:

Зачем начинать с малого и наращивать?
Что такое область просмотра?
Изменение размера содержимого под область просмотра
Избегание элементов статического размера
Сенсорные цели и почему они должны быть большими

Урок 3 — Создание

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

Охваченные темы:

Медиа-запросы CSS
Что такое точка останова и как ее выбрать
Использование гибкого блока CSS для изменения макета

Урок 4 — Общие шаблоны ответа

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

Охваченные темы:

В основном жидкий узор
Образец падения столбца
Образец сдвига макета
Образец вне холста

Урок 5 — Оптимизация

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

Охваченные темы:

Незначительные точки останова
Оптимизация макета текста
Размер шрифта
Оптимальная длина строки
Адаптивные таблицы и стратегии работы с ними

Адаптивный веб-дизайн — научиться кодировать Расширенный HTML и CSS

Урок 4

В этом уроке
4

HTML

CSS

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

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

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

Отзывчивый обзор

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

Сам термин адаптивный веб-дизайн был придуман и в значительной степени разработан Итаном Маркоттом. Многое из того, что рассматривается в этом уроке, впервые было рассказано Итаном в сети и в его книге Responsive Web Design , которую стоит прочитать.

Фиг.4
У

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

Отзывчивый vs.Адаптивный и мобильный

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

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

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

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

Гибкие макеты

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

Относительная длина области просмотра

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

VW

Ширина окна просмотра
vh

Высота окон просмотра
vmin

Минимум высоты и ширины области просмотра
vmax

Максимум высоты и ширины области просмотра

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

Формула основана на делении целевой ширины элемента на ширину его родительского элемента. Результат — относительная ширина целевого элемента.

       1
2  цель ÷ контекст = результат
  
 Гибкая сетка 
 Давайте посмотрим, как эта формула работает в макете из двух столбцов.Ниже у нас есть родительский раздел с классом , контейнер , охватывающий как  раздел , так и , за исключением элементов . Цель состоит в том, чтобы раздел   был слева, а  - в стороне,  — справа, с равными полями между ними. Обычно разметка и стили для этого макета выглядят примерно так.
 HTML 
       1
2
3
4
5  
  <раздел>... 
   ... 

  
 CSS 
       1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16  .container {
  ширина: 538 пикселей;
}
раздел,
в стороне {
  маржа: 10 пикселей;
}
раздел {
  плыть налево;
  ширина: 340 пикселей;
}
в стороне {
  float: right;
  ширина: 158 пикселей;
}
  
 Используя формулу гибкой сетки, мы можем взять все фиксированные единицы длины и превратить их в относительные единицы.В этом примере мы будем использовать проценты, но  em  будут работать одинаково. Обратите внимание, независимо от того, насколько широким становится родительский контейнер  , секции   и , за исключением полей  и ширины, масштабируются пропорционально.
       1
2
3
4
5
6
7
8
9
10
11
12
13  секция,
в стороне {
  маржа: 1.858736059%; / * 10px ÷ 538px = 0,018587361 * /
}
раздел {
  плыть налево;
  ширина: 63.197026%; / * 340px ÷ 538px =.63197026 * /
}
в стороне {
  float: right;
  ширина: 29,3680297%; / * 158 пикселей ÷ 538 пикселей = 0,293680297 * /
}
  
 Принятие концепции гибкого макета и формулы и повторное их применение ко всем частям сетки позволит создать полностью динамический веб-сайт, масштабируемый под любой размер области просмотра. Для еще большего контроля в гибком макете вы также можете использовать свойства  min-width ,  max-width ,  min-height  и  max-height .
 Одного подхода к гибкой компоновке недостаточно. Иногда ширина области просмотра браузера может быть настолько маленькой, что даже пропорциональное масштабирование макета приведет к созданию столбцов, которые слишком малы для эффективного отображения содержимого. В частности, когда макет становится слишком маленьким или слишком большим, текст может стать неразборчивым, а макет может начать ломаться. В этом случае мультимедийные запросы могут быть использованы для улучшения взаимодействия с пользователем.
 Медиа-запросы были созданы как расширение для типов мультимедиа, которые обычно встречаются при нацеливании и включении стилей.Медиа-запросы предоставляют возможность указывать разные стили для конкретных условий браузера и устройства, например, ширины области просмотра или ориентации устройства. Возможность применять уникально ориентированные стили открывает мир возможностей и возможностей для адаптивного веб-дизайна.
 Инициализация медиа-запросов 
 Существует несколько различных способов использования медиа-запросов: использование правила  @media  внутри существующей таблицы стилей, импорт новой таблицы стилей с использованием правила  @import  или создание ссылки на отдельную таблицу стилей изнутри HTML-документ.Вообще говоря, рекомендуется использовать правило  @media  внутри существующей таблицы стилей, чтобы избежать дополнительных HTTP-запросов.
 HTML 
       1
2
3  

  
 CSS 
       1
2
3
4
5
6  / * Правило @media * /
@media all and (max-width: 1024px) {...}

/ * Правило @import * /
@import url (styles.css) all and (max-width: 1024px) {...}
  
 Каждый медиа-запрос может включать в себя тип медиа, за которым следует одно или несколько выражений. Общие типы носителей включают  все ,  screen ,  print ,  tv  и  braille . Спецификация HTML5 включает новые типы мультимедиа, в том числе  3d-очки . Если тип мультимедиа не указан, медиа-запрос по умолчанию будет использовать тип мультимедиа как  screen .
 Выражение медиа-запроса, которое следует за типом медиа, может включать в себя различные медиа-функции и значения, которые затем присваиваются как истинные или ложные. Когда мультимедийной функции и значению присваивается значение true, применяются стили. Если для медиа-функции и значения присвоено значение false, стили игнорируются.
 Логические операторы в медиа-запросах 
 Логические операторы в медиа-запросах помогают создавать мощные выражения. Для использования в медиа-запросах доступны три различных логических оператора, в том числе  и ,  не  и  только .
 Использование логических операторов  и  в медиа-запросе позволяет добавить дополнительное условие, гарантируя, что браузер или устройства выполняют и , и , и , и , и , и , и т. Д. Несколько отдельных медиа-запросов могут быть разделены запятыми, действуя как невысказанный оператор  или . В приведенном ниже примере выбираются все типы мультимедиа от  800  до  1024  пикселей в ширину.
       1
2  @media all and (min-width: 800px) и (max-width: 1024px) {...}
  
 Логический оператор , а не  отменяет запрос, указывая любой запрос, кроме идентифицированного. В приведенном ниже примере выражение применяется к любому устройству, не имеющему цветного экрана. Здесь, например, применимы черно-белые или монохромные экраны.
       1
2  @media not screen and (color) {...}
  
 Логический оператор  only  является новым оператором и не распознается пользовательскими агентами, использующими алгоритм HTML4, таким образом скрывая стили от устройств или браузеров, которые не поддерживают медиа-запросы.Ниже выражение выбирает только экраны с портретной ориентацией, на которых пользовательский агент может воспроизводить медиа-запросы.
       1
2  только экран @media и (ориентация: книжная) {...}
  
 Без типа носителя 
 При использовании , а не  и , только логических операторов , тип носителя может быть отключен. В этом случае тип носителя по умолчанию  все .
 Медиа-функции в медиа-запросах 
 Знание синтаксиса медиа-запросов и работы логических операторов — отличное введение в медиа-запросы, но настоящая работа связана с медиа-функциями. Функции мультимедиа определяют, какие атрибуты или свойства будут использоваться в выражении мультимедийного запроса.
 Высота 
 и ширина  Характеристики материала для печати
 Одна из наиболее распространенных функций мультимедиа связана с определением высоты или ширины для области просмотра устройства или браузера.Высота и ширина могут быть найдены с помощью функций мультимедиа  высота  и  ширина . Затем к каждой из этих мультимедийных функций может быть добавлен префикс  min  или  max , создавая такую функцию, как  min-width  или  max-width .
 Параметры , высота,  и , ширина, , основаны на высоте и ширине области визуализации области просмотра, например окна браузера. Значения для этих характеристик мультимедиа по высоте и ширине могут быть любой единицей длины, относительной или абсолютной.
       1
2  @media all and (min-width: 320px) и (max-width: 780px) {...}
  
 В адаптивном дизайне наиболее часто используемые функции включают  min-width  и  max-width . Они помогают создавать адаптивные веб-сайты в равной степени на настольных компьютерах и мобильных устройствах, избегая путаницы с функциями устройства.
 Использование минимум 
 и максимум  префиксов
 Префиксы  мин.  и  макс.  могут использоваться для многих мультимедийных функций.Префикс  min  указывает значение , большее или равное , тогда как префикс  max  указывает значение , меньшее или равное . Использование префиксов  мин.  и  макс.  позволяет избежать конфликта с общим синтаксисом HTML, в частности не использовать символы  < и > .
 Ориентация носителя 
 Ориентация  Функция носителя  определяет, находится ли устройство в горизонтальной  ориентации  или  книжной ориентации .Пейзажный режим   срабатывает, когда дисплей шире, чем выше, а режим  портрет  срабатывает, когда дисплей выше, чем шире. Эта мультимедийная функция играет большую роль в мобильных устройствах.
       1
2  @media all and (ориентация: альбомная) {...}
  
 Формат изображения Характеристики носителя 
 Соотношение сторон   и  соотношение сторон устройства  указывает соотношение ширины / высоты  пикселей  целевой области рендеринга или устройства вывода.Префиксы  min  и  max  доступны для использования с различными функциями соотношения сторон, определяя соотношение выше или ниже указанного.
 Значение для функции соотношения сторон состоит из двух положительных целых чисел, разделенных косой чертой. Первое целое число определяет ширину в пикселях, а второе целое число определяет высоту в пикселях.
       1
2  @media all and (min-device-aspect-ratio: 16/9) {...}
  
 Pixel Ratio Media Features  В дополнение к функциям мультимедиа с соотношением сторон существует также  функций мультимедиа с соотношением пикселей . Эти функции включают в себя функцию  отношения пикселей устройства , а также префиксы  мин.  и  макс. . В частности, функция соотношения пикселей отлично подходит для идентификации устройств высокой четкости, включая дисплеи Retina. Медиа-запросы для этого выглядят следующим образом.
       1
2  @media only screen и (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}
  
 Разрешение Медиа Функция 
 Разрешение  Функция мультимедиа  определяет разрешение устройства вывода в плотности пикселей, также известной как точек на дюйм или  DPI . Медиа-функция  с разрешением  принимает префиксы  мин.  и  макс. .Кроме того, мультимедийная функция  с разрешением  будет принимать точки на пиксель ( 1,3dppx, ), точки на сантиметр ( 118dpcm, ) и другие значения разрешения на основе длины.
       1
2  @media print и (минимальное разрешение: 300 точек на дюйм) {...}
  
 Другие мультимедийные функции  Другие мультимедийные функции включают определение доступных выходных цветов с использованием функций  цвет ,  цветовой индекс  и  монохромный , идентификацию растровых устройств с помощью функции  сетки  и идентификацию процесса сканирования телевизора с помощью  отсканируйте  особенность.Эти функции менее распространены, но в равной степени полезны при необходимости.
 Браузер медиазапросов Поддержка 
 К сожалению, медиа-запросы не работают в Internet Explorer 8 и ниже, а также в других устаревших браузерах. Однако есть пара подходящих полифиллов, написанных на Javascript.
 Respond.js — это легкий полифилл, который ищет только типы мультимедиа минимальной / максимальной ширины, что идеально подходит, если используются только эти типы медиазапросов. CSS3-MediaQueries.js — это более развитый и тяжелый полифилл, предлагающий поддержку большего массива более сложных медиа-запросов.Кроме того, имейте в виду, что любой полифил может иметь проблемы с производительностью и потенциально замедлять работу веб-сайтов. Убедитесь, что любой конкретный полифилл стоит компромисса с производительностью.
 Демо-версия медиа-запросов 
 Используя медиа-запросы, мы теперь перепишем гибкий макет, который мы создали ранее. Одна из текущих проблем в демонстрации возникает, когда боковая ширина становится бесполезно маленькой в меньших окнах просмотра. Добавив медиа-запрос для видовых экранов шириной  420  пикселей, мы можем изменить макет, отключив поплавки и изменив ширину  секции  и  в сторону .
       1
2
3
4
5
6
7  @media all and (max-width: 420px) {
  section, aside {
    float: нет;
    ширина: авто;
  }
}
  
  Фиг.4 
 Без каких-либо медиа-запросов разделы   и  в сторону  становятся довольно маленькими. Возможно, слишком маленький, чтобы даже содержать реальный контент.
  Фиг.4 
 Используя медиа-запросы для удаления поплавков и изменения их ширины, раздел ,  и , кроме , теперь могут охватывать всю ширину области просмотра, позволяя передышку для любого существующего контента.
 Определение точек останова 
 Ваш инстинкт может заключаться в том, чтобы записывать точки останова медиа-запроса вокруг общих размеров области просмотра, определяемых различными разрешениями устройства, например,  320 пикселей ,  480 пикселей ,  768 пикселей ,  1024 пикселей ,  1224 пикселей  и т. Д. Это  плохая идея .
 При создании адаптивного веб-сайта он должен адаптироваться к массиву различных размеров области просмотра, независимо от устройства. Точки останова следует вводить только тогда, когда веб-сайт начинает ломаться, выглядит странно или затрудняется работа.
 Кроме того, все время выпускаются новые устройства и разрешения. Попытка не отставать от этих изменений может оказаться бесконечным процессом.
 Mobile First 
 Один из популярных методов использования медиа-запросов называется  сначала мобильный . Подход, ориентированный на мобильные устройства, включает использование стилей, нацеленных на меньшие области просмотра, в качестве стилей по умолчанию для веб-сайта, а затем использование медиа-запросов для добавления стилей по мере увеличения области просмотра.
 Основное мнение, лежащее в основе дизайна, ориентированного на мобильные устройства, заключается в том, что пользователю мобильного устройства, обычно использующего меньшее окно просмотра, не нужно загружать стили для настольного компьютера только для того, чтобы позже они были перезаписаны мобильными стилями.Это пустая трата полосы пропускания. Пропускная способность, которая важна для всех пользователей, которым нужен быстрый веб-сайт.
 Подход «сначала мобильные» также поддерживает проектирование с учетом ограничений мобильного пользователя. Вскоре большая часть использования Интернета будет осуществляться на мобильных устройствах. Планируйте их соответствующим образом и развивайте собственный мобильный опыт.
 Ряд мобильных медиа-запросов в первую очередь может выглядеть примерно так.
       1
2
3
4
5
6  / * Сначала стили по умолчанию, затем медиа-запросы * /
@media screen и (min-width: 400px) {...}
@media screen и (min-width: 600px) {...}
@media screen и (min-width: 1000 пикселей) {...}
@media screen и (min-width: 1400px) {...}
  
 Кроме того, загрузку ненужных медиаресурсов можно остановить с помощью медиа-запросов. Вообще говоря, избегать CSS3-теней, градиентов, преобразований и анимации в мобильных стилях — тоже неплохая идея. При чрезмерном использовании они вызывают большую нагрузку и могут даже сократить срок службы батареи устройства.
       1
2
3
4
5
6
7
8
9
10
11  / * Носитель по умолчанию * /
тело {
  фон: #ddd;
}
/ * Медиа для больших устройств * /
@media screen и (min-width: 800px) {
  тело {
    фоновое изображение: url ("bg.png") 50% 50% без повтора;
  }
}
  
 Мобильная первая демонстрация 
 Добавляя медиа-запросы к нашему предыдущему примеру, мы переписали несколько стилей, чтобы иметь лучший макет на видовых экранах шириной менее  420  пикселей.Переписав этот код, чтобы сначала использовать мобильные стили по умолчанию, а затем добавив медиа-запросы для настройки видовых экранов шириной более 420  пикселей, мы построим следующее:
       1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18  секция,
в стороне {
  маржа: 1.858736059%;
}
@media all and (min-width: 420px) {
  .container {
    максимальная ширина: 538 пикселей;
  }
  раздел {
    плыть налево;
    ширина: 63.197026%;
  }
  в стороне {
    float: right;
    ширина: 29.3680297%;
  }
}
  
 Обратите внимание, это то же количество кода, что и раньше. Единственным исключением является то, что мобильные устройства должны отображать только  одну декларацию CSS . Все остальные стили откладываются, загружаются только на более крупные области просмотра и без перезаписи исходных стилей.
 Область просмотра 
 В наши дни мобильные устройства обычно неплохо справляются с отображением веб-сайтов. Иногда им может понадобиться небольшая помощь, особенно при определении размера области просмотра, масштаба и разрешения веб-сайта.Чтобы исправить это, Apple изобрела метатег  viewport .
  Фиг.4 
 Хотя в этой демонстрации есть медиа-запросы, многие мобильные устройства по-прежнему не знают исходную ширину или масштаб веб-сайта. Следовательно, они не могут прерывать медиа-запросы.
 Высота видового экрана 
 и ширина 
 Использование метатега  viewport  со значениями  height  или  width  будет определять высоту или ширину окна просмотра соответственно.Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства  высота  допускается значение ключевого слова  высота устройства , а для свойства  ширина  допускается ключевое слово  ширина устройства . Использование этих ключевых слов унаследует значения высоты и ширины устройства по умолчанию.
 Для достижения наилучших результатов и лучшего внешнего вида веб-сайта рекомендуется использовать настройки устройства по умолчанию, применив значения  device-height  и  device-width .
       1
2  
  
  Фиг.4 
 Предоставление устройствам информации о предполагаемой ширине веб-сайта,  ширина устройства  в данном случае, позволяет правильно изменять размер веб-сайта и обрабатывать любые соответствующие медиа-запросы.
 Масштаб видового экрана 
 Чтобы контролировать, как веб-сайт масштабируется на мобильном устройстве и как пользователи могут продолжать масштабировать веб-сайт, используйте свойства  с минимальным масштабом , максимальным масштабом  , начальным масштабом   и  масштабируемыми пользователем  свойствами. .
 Начальный масштаб  веб-сайта  должен быть установлен на  1 , поскольку это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, это будет соотношение между шириной устройства и размером области просмотра. Значения для  начального масштаба  всегда должны быть положительным целым числом от  0  до  10 .
       1
2  
  
  Фиг.4 
 Использование целого числа больше  1  увеличит масштаб веб-сайта до масштаба по умолчанию. Обычно это значение устанавливается равным  1 . Значения  минимального масштаба  и  максимального масштаба  определяют, насколько маленьким и большим может быть масштабирование области просмотра. При использовании  минимального масштаба  значение должно быть положительным целым числом, меньшим или равным начальному масштабу  . Используя те же рассуждения, значение  максимального масштаба  должно быть положительным целым числом, большим или равным начальному масштабу  .Значения для обоих из них также должны находиться в диапазоне от  0  до  10 .
       1
2  
  
 Вообще говоря, эти значения не должны быть установлены на то же значение, что и исходная шкала  . Это отключит любое масштабирование, которое можно выполнить вместо этого, используя масштабируемое пользователем значение  .Установка для  масштабируемого пользователем значения  на  №  отключит любое масштабирование. В качестве альтернативы, установка для  масштабируемого пользователем значения  на  да  включит масштабирование.
 Отключение возможности масштабирования веб-сайта  - плохая идея. . Это вредит доступности и удобству использования, не позволяя людям с ограниченными возможностями просматривать веб-сайт по своему желанию.
       1
2  
  
 Разрешение области просмотра 
 Разрешение браузеру решать, как масштабировать веб-сайт на основе любых значений масштаба области просмотра, обычно помогает.Когда требуется больший контроль, в частности, над разрешением устройства, можно использовать значение  target-densitydpi . Окно просмотра  target-densitydpi  принимает несколько значений, включая  device-dpi ,  high-dpi ,  medium-dpi ,  low-dpi  или фактическое число точек на дюйм.
 Использование значения  target-densitydpi в области просмотра  редко, но чрезвычайно полезно, когда требуется попиксельное управление.       1
2  
  
 Объединение значений области просмотра  Метатег  области просмотра  будет принимать как отдельные значения, так и несколько значений, что позволяет одновременно устанавливать несколько свойств области просмотра.Установка нескольких значений требует разделения их запятой в пределах значения атрибута  содержимого . Одно из рекомендуемых значений области просмотра показано ниже с использованием свойств  width  и  начального масштаба .
       1
2  
  
  Фиг.4 
 Комбинация  width = device-width  и  initial-scale = 1  обеспечивает обычно требуемый начальный размер и масштаб.
 Правило области просмотра CSS 
 Поскольку метатег  viewport  так сильно вращается вокруг установки стилей отображения веб-сайта, было рекомендовано переместить область просмотра из метатега с HTML на правило  @  в CSS. Это помогает отделить стиль от содержимого, обеспечивая более семантический подход.
 В настоящее время в некоторых браузерах уже реализовано правило  @viewport , однако его поддержка по всем направлениям невелика.Ранее рекомендованный метатег  viewport  выглядел бы как следующее правило  @viewport  в CSS.
       1
2
3
4
5  @viewport {
  ширина: ширина устройства;
  масштабирование: 1;
}
  
 Последний, не менее важный аспект адаптивного веб-дизайна — это гибкие медиа. По мере того как размер видовых экранов меняется, медиа не всегда соответствует их размерам. Изображения, видео и другие типы мультимедиа должны быть масштабируемыми, изменяя их размер по мере изменения размера области просмотра.
 Один из быстрых способов сделать носитель масштабируемым — использовать свойство  max-width  со значением  100% . Это гарантирует, что по мере уменьшения области просмотра любой носитель будет уменьшаться в соответствии с шириной своих контейнеров.
       1
2
3
4  img, video, canvas {
  максимальная ширина: 100%;
}
  
 Гибкие встроенные носители 
 К сожалению, свойство  max-width  не работает для всех экземпляров мультимедиа, особенно для  iframe  s и встроенных мультимедиа.Когда дело доходит до сторонних веб-сайтов, таких как YouTube, которые используют фреймы для встроенных мультимедиа, это огромное разочарование. К счастью, есть обходной путь.
 Чтобы встроенное мультимедиа было полностью отзывчивым, встроенный элемент должен быть абсолютно позиционирован внутри родительского элемента. Родительский элемент должен иметь ширину   из  100% , чтобы он мог масштабироваться в зависимости от ширины области просмотра. Родительский элемент также должен иметь высоту   или  0  для запуска механизма  hasLayout  в Internet Explorer.
 Padding затем присваивается нижней части родительского элемента, значение которого устанавливается в том же соотношении сторон видео. Это позволяет высоте родительского элемента быть пропорциональной его ширине. Помните предыдущую формулу адаптивного дизайна? Если видео имеет соотношение сторон 16: 9,  9 , разделенное на  16 , будет равно . 5625 , поэтому требуется нижнее заполнение  56,25% . Отступы снизу, а не сверху используются специально для предотвращения использования Internet Explorer 5.5 от разрушения и рассматривает родительский элемент как абсолютно позиционированный элемент.
 HTML 
       1
2
3
4  <рисунок>
   

  
 CSS 
       1
2
3
4
5
6
7
8
9
10
11
12
13
14  рисунок {
  высота: 0;
  обивка-дно: 56.25%; / * 16: 9 * /
  положение: относительное;
  ширина: 100%;
}
iframe {
  высота: 100%;
  слева: 0;
  позиция: абсолютная;
  верх: 0;
  ширина: 100%;
}
  
 Демонстрация гибких встроенных носителей 
 По соображениям безопасности CodePen не позволяет использовать  iframe  во встроенных примерах кода, однако вы можете просмотреть и отредактировать этот код на их веб-сайте.
 Контейнер шириной 100% 
  
 Контейнер шириной 75% 
  
 Контейнер шириной 50% 
  
 Ресурсы 
 и  Ссылки
 Учебник по адаптивному дизайну — Изучите адаптивный веб-дизайн за 5 минут 
 В этой статье я научу вас как можно большему количеству приемов адаптивного дизайна за пять минут.Этого явно недостаточно для правильного изучения, но он даст вам обзор наиболее важных концепций, которые я лично определяю как следующие:
 Относительные блоки CSS
 Медиа-запросы
 Flexbox
 Адаптивная типографика
 Если после этого вы захотите глубже погрузиться в тему, вы можете посетить наш учебный курс для адаптивных веб-разработчиков на Scrimba, который позволит вам создавать адаптивные веб-сайты на профессиональном уровне.
 А пока начнем с основ!
 Относительные единицы CSS 
 В основе адаптивного веб-дизайна лежат относительные единицы CSS.Это единицы, которые получают свою ценность от некоторой другой внешней ценности. Это удобно, поскольку позволяет, например, определять ширину изображения в зависимости от ширины браузера.
 Наиболее распространенными являются:
 В этой статье мы начнем с процентной единицы % , а затем в последнем разделе мы рассмотрим единицу  rem .
 Допустим, у вас очень простой веб-сайт, например:
 Его HTML-код выглядит следующим образом:
  
     Добро пожаловать на мой сайт 
     
  
 Как вы можете видеть из GIF ниже, наше изображение по умолчанию будет иметь фиксированную ширину:
 Это не особенно отзывчиво, поэтому давайте изменим это значение на 70 процентов. Мы просто сделаем следующее:
  .myImg {
    ширина: 70%;
}
  
 Устанавливает ширину изображения на 70 процентов от ширины его родительского элемента, т. Е. Тега  . Поскольку тег   занимает всю ширину экрана, изображение всегда будет занимать 70 процентов экрана.
 Вот результат:
 И вот насколько легко создать адаптивное изображение!
 Однако у нас есть одна проблема с нашим адаптивным макетом: он выглядит странно на очень маленьких экранах. Ширина 70% предназначена для сужения при просмотре на мобильном устройстве. Просто посмотрите сами:
 Улучшить внешний вид в этой ситуации — идеальная задача для медиа-запросов. Они позволяют применять различные стили, например, в зависимости от ширины экрана.Мы можем в основном сказать , если ширина экрана меньше 768 пикселей, используйте другой стиль. 
 Вот как мы создаем медиа-запрос в CSS:
  @media (max-width: 768px) {
    .myImage {
        ширина: 100%
    }
}
  
 Этот блок CSS будет применяться только в том случае, если ширина экрана меньше 768 пикселей.
 Вот результат:
 Как видите, на странице есть точка останова, при которой изображение внезапно становится шире. Это когда ширина браузера 768 пикселей, а изображение переключается между  70%  и  100% .
 Использование Flexbox для панели навигации 
 Далее идет Flexbox. Вы просто не сможете узнать о быстродействии, не изучив Flexbox. Он изменил игру с адаптивным дизайном, когда она была представлена несколько лет назад, поскольку она значительно упрощает адаптивное позиционирование элементов вдоль оси.
 Чтобы использовать Flexbox, мы немного усложним наш сайт, добавив панель навигации над заголовком. Вот HTML для этого:
  
     На главную 
     Обо мне 
     Связаться 

  
 По умолчанию это будет просто выглядеть так.
 Все наши элементы навигации втиснуты в левую часть, а это не то, что нам нужно. Мы хотим, чтобы они были равномерно распределены по всей странице.
 Для этого мы просто превратим контейнер навигации в гибкий бокс, а затем воспользуемся волшебным свойством  justify-content .
  nav {
    дисплей: гибкий;
    justify-content: пространство вокруг;
}
  
 Отображение : flex  превращает 
  в гибкий блок, а  justify-content: space-around  сообщает браузеру, что элементы внутри гибкого блока должны иметь пространство вокруг себя.Таким образом, браузер равномерно распределяет все оставшееся пространство вокруг трех элементов.
 Вот как это выглядит. И, как вы заметите, он хорошо масштабируется:
 Адаптивная типографика: rem 
 Последний шаг — сделать нашу типографику адаптивной. Видите ли, я хочу, чтобы панель навигации и заголовок немного уменьшились, когда ширина экрана меньше 768 пикселей (наша точка останова медиа-запроса, помните?).
 Один из способов сделать это — уменьшить все размеры шрифта в медиа-запросе, например:
  @media (max-width: 768px) {
    nav {
        размер шрифта: 14 пикселей;
    }
    h2 {
        размер шрифта: 28 пикселей;
    }
}
  
 Но это не идеально.У нас может быть несколько точек останова в приложении, а также несколько элементов (h3, h4, абзацы и т. Д.). В результате нам придется отслеживать все элементы во всех различных точках останова. Будет бардак!
 Однако, скорее всего, они будут относиться друг к другу более или менее одинаково в различных точках останова. Например,  h2  всегда будет больше, чем  абзац .
 Так что, если бы я мог настроить один коэффициент, а затем сделать так, чтобы остальные размеры шрифта масштабировались относительно этого коэффициента?
 Введите ремс!
  rem  в основном это: значение font-size, которое вы установили для своего элемента  .Нравится это:
  html {
    размер шрифта: 14 пикселей;
}
  
 Итак, в этом документе один  rem  равен 14px.
 Это означает, что мы можем установить все размеры шрифтов на нашем веб-сайте в единицах  rem , например:
  h2 {
    размер шрифта: 2rem;
}

nav {
    размер шрифта: 1 бэр;
}
  
 А затем мы просто изменим значение font-size для тега   внутри нашего медиа-запроса. Это гарантирует, что размер шрифта для наших элементов  h2  и  nav  также изменится.
 Вот как мы меняем значение  rem  в медиа-запросе:
  @media (max-width: 768px) {
    html {
        размер шрифта: 14 пикселей
    }
}
  
 И точно так же у нас есть точка останова для всех наших размеров шрифта. Обратите внимание, как изменяется размер шрифта, когда страница пересекает отметку в 768 пикселей:
 Прошло всего пять минут, но теперь вы фактически научились настраивать размеры шрифта, изображения и элементы навигационной панели в соответствии с шириной страница. Это довольно хорошо, и вы сделали свои первые шаги к изучению очень ценных навыков создания адаптивных веб-сайтов.
 Если вы заинтересованы в продолжении этого познавательного пути, я бы порекомендовал вам взглянуть на наш обширный курс Scrimba по этой теме! Его преподает один из самых популярных преподавателей YouTube по этому предмету, и он выведет вас на профессиональный уровень в адаптивном веб-дизайне.
 Удачного кодирования 🙂
 Спасибо за чтение! Меня зовут Пер Борген, я соучредитель Scrimba — самого простого способа научиться программировать. Вам следует посетить наш учебный курс по адаптивному веб-дизайну, если вы хотите научиться создавать современный веб-сайт на профессиональном уровне.
 Щелкните здесь, чтобы перейти на курс повышения квалификации.
 Создание мобильных вариантов с использованием адаптивных макетов 
 В этом уроке мы рассмотрим, как легко создавать различные варианты взаимодействия для разных типов устройств.
 По умолчанию Ceros масштабируется в соответствии с любым устройством, на котором пользователь просматривает контент, но мы также позволяем нашим пользователям адаптировать дизайн своего взаимодействия для настольных компьютеров, планшетов и мобильных устройств.
 Когда вы впервые создаете интерфейс, вы всегда будете начинать с настольной версии, которая отображается в окне Global Layout.Обычно вам следует доработать этот первоначальный дизайн, прежде чем переходить к любому из других вариантов, чтобы не дублировать работу.
 После того, как вы закончите этот первоначальный дизайн, вы можете создать либо версию для планшета, либо мобильную версию для настройки. Что бы вы ни выбрали, вы увидите, что весь размер холста автоматически настраивается в соответствии с размерами планшета или мобильного устройства, однако мы не будем пытаться переформатировать ваши ресурсы. Это оставляет контроль над дизайном в ваших руках.
 Имейте в виду, что в некоторых случаях настройка варианта может быть столь же простой, как изменение размера содержимого, а в других случаях вы можете захотеть полностью изменить дизайн — вам решать, что лучше всего подходит для вашей работы.
 Чтобы изменить расположение содержимого, сначала выберите все ресурсы и вручную отцентрируйте их на холсте. Оттуда вы можете войти и начать вносить индивидуальные настройки, такие как перемещение текста, повторное расположение элементов и, возможно, даже удаление ненужных разделов. Обратите внимание, что если вы выберете текстовый объект, цвет выделения будет другим. Это связано с тем, что ваш опыт будет автоматически синхронизировать любые изменения текста, сделанные между вариантами, чтобы сэкономить ваше время при редактировании. Это относится только к самим персонажам, поэтому при необходимости вы можете настроить стили шрифтов (вы также можете полностью отключить синхронизацию текста на панели инспектора).
 Также важно убедиться, что вы исправляете любые неправильные взаимодействия, которые нарушались при переходе на вариант сенсорного устройства. Вы увидите, что любые горячие точки или объекты, на которых есть взаимодействие «При наведении», будут отмечены красной точкой рядом с ними на панели слоев. Это означает, что это взаимодействие прервано, поскольку вы не сможете навести курсор на сенсорное устройство. Поэтому не забудьте настроить любые взаимодействия при наведении или наведении курсора для создаваемых вами вариантов.
 Если у вас есть какие-либо вопросы по созданию варианта для мобильных устройств или планшетов или возникли проблемы с оптимизацией версий, обращайтесь в чат поддержки, и мы будем рады помочь.
 Адаптивные макеты: как создавать мобильные варианты 
 Время чтения: 3 минуты.
 Создавая контент в Ceros, вы, вероятно, заметили, что при масштабировании браузера размер контента будет автоматически изменяться в соответствии с размером экрана. Однако может наступить время, когда вы захотите дополнительно настроить внешний вид вашего опыта на экранах разных размеров и типов устройств. Войдите в адаптивные макеты.
 Adaptive Layouts — это наш ответ на парадокс «адаптивного дизайна», который состоит в том, что большинство «отзывчивых» платформ полностью игнорируют часть адаптивного дизайна  .Вместо этого с Ceros мы принимаем дизайн и возвращаем нашим пользователям контроль над тем, как их опыт работы на разных устройствах — будь то настольный компьютер, планшет или мобильный телефон.
 Чтобы использовать панель Adaptive Layouts для создания варианта вашего опыта для нового устройства…
 Во-первых, завершите разработку своей настольной / глобальной версии макета, которая является исходным макетом при создании нового интерфейса. Как правило, мы рекомендуем доработать этот дизайн, прежде чем переходить к любым другим вариантам, чтобы свести к минимуму дублирование работы.
 Наведите указатель мыши на панель «Адаптивные макеты» и выберите создание версии для планшета или мобильного устройства. Что бы вы ни выбрали, вы увидите, что все, что вы создали в макете рабочего стола, будет скопировано на планшет или мобильное устройство, но Ceros не будет пытаться изменить размер или переформатировать ваш контент. Это оставляет контроль над дизайном в ваших руках.
 Пришло время настроить ваш вариант. Имейте в виду, что этот процесс может быть таким же простым, как изменение размера содержимого, или, в других случаях, вы можете захотеть полностью изменить дизайн.Вам решать, что лучше всего подходит для вашей работы.
 Когда вы закончите редизайн, просто нажмите «Опубликовать», и мы позаботимся обо всем остальном. Теперь, когда кто-то посетит ваш сайт, он получит версию, разработанную специально для устройства, на котором он находится.
 Несколько важных моментов, о которых следует помнить:
 Ваш опыт будет автоматически синхронизировать любые изменения текста, сделанные между вашими вариантами, чтобы сэкономить ваше время при редактировании. Это касается только изменений самих символов, но не стилей шрифтов или их расположения.Вы можете в любой момент отключить синхронизацию текста на вкладке «Дизайн» панели инспектора.
 Взаимодействие при наведении курсора не будет работать на сенсорном экране, поэтому обязательно настройте все триггеры наведения в соответствии с вашими мобильными возможностями. Ceros идентифицирует эти ошибочные взаимодействия с помощью красной точки на панели слоев.
 По умолчанию Ceros обнаруживает устройство, с которого приходит ваш пользователь, и таким образом обслуживает правильный вариант, но у вас также есть возможность переключить взаимодействие с помощью точки останова. Переключите значок шестеренки на панели глобальных макетов для определения на основе «ширины экрана» или «типа устройства».
 И, наконец, перед публикацией помните, что вы можете протестировать свой опыт на различных устройствах, выбрав определенный тип устройства на панели предварительного просмотра или отправив URL-адрес предварительного просмотра на свое мобильное устройство или планшет.
 Если у вас есть какие-либо вопросы по созданию варианта для мобильных устройств или планшетов или возникли проблемы с оптимизацией версий, обращайтесь в чат поддержки, и мы будем рады помочь.
 Адаптивный дизайн — Изучите веб-разработку 
 На заре веб-дизайна страницы создавались для экрана определенного размера.Если у пользователя был экран большего или меньшего размера, чем ожидал дизайнер, результаты варьировались от нежелательных полос прокрутки до слишком длинной строки и плохого использования пространства. По мере того, как стали доступны более разнообразные размеры экранов, появилась концепция  отзывчивого веб-дизайна  (RWD), набор методов, которые позволяют веб-страницам изменять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т. Д. изменили наш подход к дизайну для сети с несколькими устройствами, и в этой статье мы поможем вам понять основные методы, которые вам нужно знать, чтобы овладеть им.
 В какой-то момент истории у вас было два варианта разработки веб-сайта:
 Вы можете создать  жидкий сайт , который будет растягиваться, чтобы заполнить окно браузера
 или  сайта с фиксированной шириной , что будет фиксированным размером в пикселях.
 Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего этот сайт! Жидкий сайт привел к сплющенному дизайну на экранах меньшего размера (как показано ниже) и нечитаемо длинным линиям на экранах большего размера.
  Примечание : См. Этот простой жидкий макет: пример, исходный код. При просмотре примера перетаскивайте окно браузера внутрь и наружу, чтобы увидеть, как оно выглядит при разных размерах.
 Сайт фиксированной ширины рисковал иметь горизонтальную полосу прокрутки на экранах меньше ширины сайта (как показано ниже) и много белого пространства по краям дизайна на больших экранах.
  Примечание : См. Этот простой макет фиксированной ширины: пример, исходный код. Опять же, наблюдайте за результатом при изменении размера окна браузера.
 Когда мобильный Интернет стал реальностью с появлением первых функциональных телефонов, компании, которые хотели использовать мобильные устройства, обычно создавали специальную мобильную версию своего сайта с другим URL-адресом (часто что-то вроде  m.example.com  или  пример.mobi ). Это означало, что необходимо было разработать и поддерживать в актуальном состоянии две отдельные версии сайта.
 Кроме того, эти мобильные сайты часто предлагали очень урезанный опыт. По мере того, как мобильные устройства становились все более мощными и могли отображать веб-сайты целиком, это расстраивало мобильных пользователей, которые оказались в ловушке мобильной версии сайта и не смогли получить доступ к информации, которая, как они знали, была в полнофункциональной настольной версии сайта.
 Было разработано несколько подходов, чтобы попытаться устранить недостатки жидких методов создания веб-сайтов или методов фиксированной ширины. В 2004 году Кэмерон Адамс написал пост под названием «Макет, зависящий от разрешения», описывающий метод создания дизайна, который можно адаптировать к разным разрешениям экрана. Этот подход требовал JavaScript для определения разрешения экрана и загрузки правильного CSS.
 Зои Микли Гилленуотер сыграла важную роль в ее работе по описанию и формализации различных способов создания гибких сайтов, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
 Термин адаптивный дизайн был придуман Итаном Маркоттом в 2010 году и описывал использование трех методов в сочетании.
 Первой была идея жидкостных решеток, которая уже была исследована Гилленуотером, и о ней можно прочитать в статье Маркотта «Fluid Grids» (опубликованной в 2009 году в A List Apart).
 Второй метод был идеей жидких изображений. Используя очень простой метод установки для свойства  max-width  значения  100% , изображения будут уменьшаться в меньшем масштабе, если их содержащий столбец станет уже, чем внутренний размер изображения, но никогда не станет больше.Это позволяет изображению уменьшаться, чтобы поместиться в столбец гибкого размера, а не переполнять его, но не увеличиваться в размерах и не становиться пикселизированными, если столбец становится шире изображения.
 Третьим ключевым компонентом был медиа-запрос. Медиа-запросы позволяют переключать тип макета, который Кэмерон Адамс ранее исследовал с помощью JavaScript, используя только CSS. Вместо того, чтобы иметь один макет для всех размеров экрана, макет можно было изменить. Боковые панели можно переместить для меньшего экрана или отобразить альтернативную навигацию.
 Важно понимать, что адаптивный веб-дизайн  не является отдельной технологией  — это термин, используемый для описания подхода к веб-дизайну или набора передовых практик, используемых для создания макета, который может  отвечать  на устройство, используемое для просмотра содержимого. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием чисел с плавающей запятой) и медиа-запросы, однако за почти 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала по умолчанию.Современные методы макета CSS по своей сути являются адаптивными, и у нас есть новые функции, встроенные в веб-платформу, чтобы упростить разработку адаптивных сайтов.
 Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
 Адаптивный дизайн появился только благодаря медиа-запросу. Спецификация Media Queries Level 3 стала кандидатом в рекомендацию в 2009 году, что означает, что она была признана готовой для реализации в браузерах.Медиа-запросы позволяют нам запускать серию тестов (например, является ли экран пользователя больше определенной ширины или определенного разрешения) и выборочно применять CSS для стилизации страницы в соответствии с потребностями пользователя.
 Например, следующие медиа-запросы проверяют, отображается ли текущая веб-страница как экранный носитель (следовательно, не как печатный документ), а ширина области просмотра составляет не менее 800 пикселей. CSS для селектора  .container  будет применяться только в том случае, если эти два условия верны.
  @media screen и (min-width: 800px) {
  .container {
    маржа: 1em 2em;
  }
}
  
 Вы можете добавить несколько медиа-запросов в таблицу стилей, настроив весь макет или его части, чтобы они наилучшим образом соответствовали разным размерам экрана. Точки, в которых вводится медиа-запрос и изменяется макет, известны как точки останова  .
 Распространенным подходом при использовании Media Queries является создание простого одностолбцового макета для устройств с узким экраном (например,g), затем проверьте наличие больших экранов и реализуйте макет с несколькими столбцами, если вы знаете, что у вас достаточно ширины экрана, чтобы справиться с этим. Это часто описывается как « мобильный первый дизайн ».
 Дополнительные сведения см. В документации MDN для запросов мультимедиа.
 Адаптивные сайты не просто меняют макет между точками останова, они построены на гибких сетках. Гибкая сетка означает, что вам не нужно настраивать таргетинг на все возможные размеры устройств и создавать для них идеальный макет.Такой подход был бы невозможен, учитывая огромное количество существующих устройств разного размера и тот факт, что, по крайней мере, на настольных компьютерах люди не всегда открывают окно браузера до максимума.
 Используя гибкую сетку, вам нужно только добавить точку останова и изменить дизайн в точке, где содержимое начинает выглядеть плохо. Например, если длина строки становится нечитаемой по мере увеличения размера экрана, или поле становится сжатым с двумя словами на каждой строке по мере его сужения.
 На заре создания адаптивного дизайна единственным вариантом создания макета было использование плавающих элементов.Гибкие плавающие макеты были достигнуты за счет указания ширины каждого элемента в процентах и обеспечения того, чтобы итоговые значения по макету не превышали 100%. В своей оригинальной статье о подвижных сетках Маркотт подробно описал формулу для преобразования макета, разработанного с использованием пикселей, в проценты.
  цель / контекст = результат 
 
 Например, если размер нашего целевого столбца составляет 60 пикселей, а контекст (или контейнер), в котором он находится, составляет 960 пикселей, мы делим 60 на 960, чтобы получить значение, которое мы можем использовать в нашем CSS, после перемещения десятичной точки на два разряда. Направо.
 Этот подход можно найти сегодня во многих местах в Интернете, и он задокументирован здесь, в разделе макета нашей статьи о методах макета прежних версий. Скорее всего, вы столкнетесь с веб-сайтами, использующими этот подход в своей работе, поэтому стоит понять его, даже если вы не станете создавать современный сайт с использованием гибкой сетки на основе чисел с плавающей запятой.
 В следующем примере демонстрируется простой адаптивный дизайн с использованием Media Queries и гибкой сетки. На узких экранах макет отображает коробки, расположенные друг над другом:
 На более широких экранах они перемещаются в две колонки:
 Современные методы макета, такие как макет с несколькими столбцами, Flexbox и Grid, по умолчанию являются адаптивными.Все они предполагают, что вы пытаетесь создать гибкую сетку, и предлагают более простые способы сделать это.
 Multicol 
 Самый старый из этих методов компоновки — multicol — когда вы указываете  количество столбцов , это указывает, на сколько столбцов вы хотите разделить ваш контент. Затем браузер определяет их размер, который будет меняться в зависимости от размера экрана.
  .container {
  количество столбцов: 3;
}
  
 Если вместо этого указать ширину столбца  , вы указываете минимальную ширину  .Браузер создаст столько столбцов этой ширины, сколько удобно помещается в контейнер, а затем разделит оставшееся пространство между всеми столбцами. Поэтому количество столбцов будет меняться в зависимости от того, сколько места есть.
  .container {
  ширина столбца: 10em;
}
  
 Flexbox 
 В Flexbox элементы гибкости будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере, что является их исходным поведением. Изменяя значения для  flex-grow  и  flex-shrink , вы можете указать, как вы хотите, чтобы элементы вели себя, когда они сталкиваются с большим или меньшим пространством вокруг них.
 В приведенном ниже примере каждый из гибких элементов будет занимать равное количество места в гибком контейнере, используя сокращение  flex: 1 , как описано в теме макета Flexbox: гибкие размеры гибких элементов.
  .container {
  дисплей: гибкий;
}

.элемент {
  гибкость: 1;
}
  
  Примечание : В качестве примера мы перестроили простой адаптивный макет выше, на этот раз с использованием flexbox. Вы можете видеть, что нам больше не нужно использовать странные процентные значения для расчета размера столбцов: пример, исходный код.
 CSS grid 
 В CSS Grid Layout блок  fr  позволяет распределять доступное пространство по дорожкам сетки. В следующем примере создается контейнер сетки с тремя дорожками размером  1fr . Это создаст три дорожки для столбцов, каждая из которых займет одну часть доступного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Learn Layout Grids в разделе «Гибкие сетки с единицей fr».
  .container {
  дисплей: сетка;
  сетка-шаблон-столбцы: 1fr 1fr 1fr;
}
  
  Примечание : Версия макета сетки еще проще, поскольку мы можем определять столбцы в файле.оболочка: пример, исходный код.
 Простейший подход к адаптивным изображениям описан в ранних статьях Маркотта об адаптивном дизайне. По сути, вы должны взять изображение самого большого размера, который может потребоваться, и уменьшить его. Этот подход используется до сих пор, и в большинстве таблиц стилей вы найдете где-то следующий CSS:
 У этого подхода есть очевидные недостатки. Изображение может отображаться намного меньше, чем его собственный размер, что является пустой тратой полосы пропускания — мобильный пользователь может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера.Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на настольном компьютере. Например, было бы неплохо иметь квадратное изображение для мобильных устройств, но показывать ту же сцену, что и пейзажное изображение на рабочем столе. Или, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Этого нельзя добиться за счет уменьшения изображения.
 Адаптивные изображения с использованием элемента    и атрибутов     srcset  и  размеров  решают обе эти проблемы.Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение размера. подходит для устройства, которое они используют.
 Вы также можете  напрямую направить  изображений, используемых в разных размерах, таким образом обеспечивая различное кадрирование или совершенно другое изображение для разных размеров экрана.
 Вы можете найти подробное руководство по адаптивным изображениям в разделе Learn HTML здесь, на MDN.
 Элементом адаптивного дизайна, не описанным в предыдущих работах, была идея адаптивной типографики. По сути, это описывает изменение размеров шрифта в медиа-запросах, чтобы отразить меньшую или большую площадь экрана.
 В этом примере мы хотим установить заголовок уровня 1 равным  4rem , что означает, что он будет в четыре раза больше нашего базового размера шрифта. Это действительно большой заголовок! Нам нужен этот большой заголовок только на больших экранах, поэтому мы сначала создаем заголовок меньшего размера, а затем используем медиа-запросы, чтобы перезаписать его на больший размер, если мы знаем, что у пользователя размер экрана не менее  1200 пикселей .
  html {
  размер шрифта: 1em;
}

h2 {
  размер шрифта: 2rem;
}

@media (min-width: 1200 пикселей) {
  h2 {
    размер шрифта: 4rem;
  }
}
  
 Мы отредактировали наш приведенный выше пример адаптивной сетки, чтобы также включить адаптивный тип с использованием описанного метода. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
 На мобильных устройствах заголовок меньше:
 Однако на рабочем столе мы видим больший размер заголовка:
 Как показывает этот подход к типографике, вам не нужно ограничивать медиа-запросы только изменением макета страницы.Их можно использовать для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
 Использование единиц просмотра для адаптивной типографики 
 Интересным подходом является использование единицы области просмотра  vw  для обеспечения гибкой типографики.  1vw  равен одному проценту ширины области просмотра, а это означает, что если вы установите размер шрифта с помощью  vw , он всегда будет соответствовать размеру области просмотра.
 Проблема с выполнением описанного выше заключается в том, что пользователь теряет возможность масштабирования любого набора текста с помощью блока  vw , поскольку этот текст всегда связан с размером области просмотра. Следовательно, вы никогда не должны устанавливать текст, используя только единицы области просмотра .
 Есть решение, и оно включает использование  calc () . Если вы добавите единицу  vw  к набору значений с использованием фиксированного размера, например  em  s или  rem  s, тогда текст все равно будет масштабируемым. По сути, устройство  vw  добавляет к этому увеличенному значению:
  h2 {
  размер шрифта: calc (1.5rem + 3vw);
}  
 Это означает, что нам нужно указать размер шрифта для заголовка только один раз, а не настраивать его для мобильных устройств и переопределять в медиа-запросах.Затем шрифт постепенно увеличивается по мере увеличения размера области просмотра.
 Если вы посмотрите на исходный HTML-код адаптивной страницы, вы обычно увидите следующий тег   в   документа.
  
  
 Этот метатег сообщает мобильным браузерам, что они должны установить ширину области просмотра в соответствии с шириной устройства и масштабировать документ до 100% от предполагаемого размера, который показывает документ в оптимизированном для мобильных устройств размере, который вы планировали.
 Зачем это нужно? Потому что мобильные браузеры часто лгут о ширине своего окна просмотра.
 Этот метатег существует потому, что когда был запущен оригинальный iPhone и люди начали просматривать веб-сайты на маленьком экране телефона, большинство сайтов не были оптимизированы для мобильных устройств. Таким образом, мобильный браузер установит ширину области просмотра на 960 пикселей, отобразит страницу с такой шириной и покажет результат как уменьшенную версию макета рабочего стола. Другие мобильные браузеры (например, на Google Android) сделали то же самое.Пользователи могли увеличивать масштаб и перемещаться по сайту, чтобы просмотреть интересующие их фрагменты, но это выглядело плохо. Вы все еще увидите это сегодня, если вам не повезло натолкнуться на сайт, у которого нет адаптивного дизайна.
 Проблема в том, что ваш адаптивный дизайн с точками останова и медиа-запросами не будет работать должным образом в мобильных браузерах. Если у вас узкий макет экрана с шириной области просмотра 480 пикселей или меньше, а область просмотра установлена на 960 пикселей, вы никогда не увидите свою узкую компоновку экрана на мобильных устройствах.Устанавливая  width = device-width , вы заменяете Apple по умолчанию  width = 960px  на фактическую ширину устройства, поэтому ваши медиа-запросы будут работать должным образом.
  Таким образом, вы должны  всегда  включать указанную выше строку HTML в заголовок ваших документов. 
 Существуют и другие параметры, которые вы можете использовать с метатегом области просмотра, однако в целом указанная выше строка — это то, что вы захотите использовать.
  initial-scale : Устанавливает начальный масштаб страницы, который мы установили на 1.
  высота : Устанавливает определенную высоту для области просмотра.
  минимальный масштаб : Устанавливает минимальный уровень масштабирования.
  максимальный масштаб : Устанавливает максимальный уровень масштабирования.
  масштабируется пользователем : предотвращает масштабирование, если установлено значение  no .
 Следует избегать использования  минимального масштаба ,  максимального масштаба  и, в частности, установки  масштабируемого пользователем  на  no . Пользователям должно быть разрешено увеличивать масштаб настолько, насколько им нужно; предотвращение этого вызывает проблемы с доступностью.
  Примечание:  Существовало правило CSS @, предназначенное для замены метатега области просмотра — @viewport — однако это правило не получило поддержки и было объявлено устаревшим. @viewport не следует использовать.
 Адаптивный дизайн относится к дизайну сайта или приложения, который реагирует на среду, в которой он просматривается. Он включает в себя ряд функций и методов CSS и HTML, и теперь, по сути, именно так мы создаем веб-сайты по умолчанию. Рассмотрим сайты, которые вы посещаете на своем телефоне — вероятно, довольно необычно встретить сайт, который является версией для настольного компьютера в уменьшенном масштабе или на котором вам нужно прокрутить в сторону, чтобы найти что-то.Это связано с тем, что Интернет перешел к такому подходу к адаптивному дизайну.
 Также стало намного проще создавать адаптивный дизайн с помощью методов компоновки, которые вы изучили в этих уроках. Если вы новичок в веб-разработке, сегодня в вашем распоряжении гораздо больше инструментов, чем в первые дни адаптивного дизайна. Поэтому стоит проверять возраст всех материалов, на которые вы ссылаетесь. Хотя исторические статьи по-прежнему полезны, современное использование CSS и HTML значительно упрощает создание элегантных и полезных дизайнов, независимо от того, с какого устройства ваш посетитель просматривает сайт.
 .
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
Навигация по записям
Previous PostПараметры pdoresources: Общие параметры / pdoTools / Компоненты / docs.modx.pro
Next PostРазметка bootstrap: Система сеток. Разметка · Bootstrap. Версия v4.0.0

Адаптивная верстка уроки: Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков

Адаптивная верстка с нуля: бесплатный видеокурс 8 уроков

Что такое адаптивная вёрстка

Адаптивная вёрстка с технической точки зрения

Метатег viewport для адаптивной вёрстки

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

Оставьте свой отзыв, для улучшения качества. Сейчас: 0 отзывов

Отзывчивый дизайн — Изучение веб-разработки

Multicol

Flexbox

CSS grid

Using viewport units for responsive typography

Адаптивный макет на флексбоксах | WebReference

Сначала мобильные

Автор и редакторы

уроки или сразу в бой? Создание левой панели

Устанавливаем базовое форматирование

Оформляем горизонтальное меню

Настраиваем логотип

Слоган сайта

Верстаем основную часть страницы

Галерея

Кухни

Создание левой панели

Информация

Меню

Чего мы ожидаем?

Junior

Middle

Senior

Заключение

Кроссбраузерная адаптивная верстка html css

Основные браузеры

Вендорные префиксы

Стандартные стили браузера

reset.css

normalize.css

FAQ и лучшие практики по реализации адаптивного веб-дизайна

Почему я должен переходить на адаптивный дизайн?

Что нужно знать перед началом работы с адаптивным дизайном?

Как можно узнать, был ли использован адаптивный дизайн для отдельно взятого сайта?

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

Не мешает ли адаптивный дизайн отображению рекламных блоков, например, в Google AdSense?

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

Есть ли какие-то недостатки в использовании адаптивного дизайна?

Семантическая верстка

Адаптивная компоновка | raywenderlich.com

Авторы

Бесплатный онлайн-курс: основы адаптивного веб-дизайна от Udacity

Обзор

Урок 1 — Почему отзывчивый?

Урок 2 — Начиная с малого

Урок 3 — Создание

Урок 4 — Общие шаблоны ответа

Урок 5 — Оптимизация

Адаптивный веб-дизайн — научиться кодировать Расширенный HTML и CSS

Урок 4

В этом уроке 4

HTML

CSS

Поделиться

Отзывчивый обзор

Отзывчивый vs.Адаптивный и мобильный

Гибкие макеты

Относительная длина области просмотра

Гибкая сетка

HTML

CSS

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

HTML

CSS

Логические операторы в медиа-запросах

Без типа носителя

Медиа-функции в медиа-запросах

Высота

Использование минимум

Ориентация носителя

Формат изображения Характеристики носителя

Pixel Ratio Media Features

Разрешение Медиа Функция

В этом уроке
4