Адаптивный дизайн css: Адаптивная вёрстка сайта на примере создания главной страницы

Ой! Это красивое большое изображение (шириной 2000 пикселей) заставляет нашу страницу визуализироваться более чем немного шатко. Мы явно должны это исправить.

Идеи? Что ж, мы могли бы добавить фиксированную ширину к изображению с помощью CSS, но проблема в том, что мы хотим, чтобы изображение масштабировалось для разных размеров экрана. Например, в CSS наш iPhone XR имеет ширину 414 пикселей и высоту 896 пикселей. Если мы установим для этого изображения ширину 414 пикселей, что произойдет, если пользователь повернет экран? На этом устройстве область просмотра шириной 414 пикселей теперь составляет 896 пикселей.К счастью, довольно легко получить плавные изображения с помощью одной строки CSS.

Я собираюсь создать файл CSS css / styles.css , который уже связан в заголовке HTML-страницы.

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

  img {
  максимальная ширина: 100%;
}
  

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

Рисунок 1.5: С небольшим количеством CSS наши изображения никогда не выйдут за свои границы

Все это правило на основе max-width оговаривает, что все изображения должны увеличиваться до 100% от своего размера. Если содержащий элемент (например, body или div , в котором он находится) меньше полной внутренней ширины изображения, изображение будет просто масштабироваться для отображения настолько большого размера, насколько это возможно в рамках этого ограничения.

Краткая касательная к ширине / максимальной ширине для изображений

Чтобы сделать изображения плавными, вы также можете использовать более широко используемое свойство width .Например, ширина : 100% , но это имеет другой эффект. Когда используется свойство width , тогда изображение будет отображаться с этой шириной относительно своего контейнера, если используются проценты, независимо от его собственного размера. В результате в нашем примере логотип (также изображение) выйдет за пределы своего внутреннего размера, чтобы заполнить 100% своего контейнера. Если контейнер намного шире, чем изображение, как в случае с нашим логотипом, это приводит к очень большому изображению.

Отлично. Теперь все выложено как положено. Независимо от размера области просмотра, ничто не выходит за пределы страницы по горизонтали.

Примеры кода, представленные в этой книге, не включают стили «префикса поставщика». Префиксы поставщиков исторически использовались для префиксов экспериментальных свойств CSS в различных браузерах; например, -webkit-backface-visibility . Включение префиксов поставщиков в CSS часто необходимо для достижения поддержки определенных свойств в старых браузерах.Теперь есть инструменты для автоматизации этого префикса, и, как вы могли догадаться, инструменты выполняют задачу быстрее и точнее, чем мы.

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

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

Рисунок 1.6: Нам явно нужно исправить размер этого изображения при увеличении окна просмотра!

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

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

Ввод медиа-запросов

Как мы установили, где-то за пределами ширины 800 пикселей наш текущий макет начинает выглядеть растянутым. На этом этапе мы будем использовать медиа-запросы CSS, чтобы настроить макет в зависимости от ширины экрана. Мы рассмотрим медиа-запросы более подробно в Глава 3 , которая изобретательно названа Медиа-запросы . На данный момент все, что вам нужно понять, это то, что медиа-запросы - это директивы в CSS, которые позволяют нам изолировать правила CSS от определенных условий окружающей среды; размер экрана в этом случае.

Точки останова

Прежде чем мы продолжим, стоит познакомиться с термином «точка останова».

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

Когда люди впервые начали использовать медиа-запросы, часто можно было увидеть проекты, построенные с определенными точками останова для обслуживания популярных устройств того времени. В то время это обычно были устройства iPhone (320 × 480 пикселей) и iPad (768 × 1024 пикселей).

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

В этот момент представьте меня своим доброжелательным отцом. Я нахмурился и настаивал: «Нет никаких конкретных точек останова - используйте точку останова, если она нужна вашему проекту, а не для конкретного устройства!».Хорошо, теперь я снова снимаю шляпу "Папа"; Обещаю не шутить, пока рядом твои друзья.

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

Однако, чтобы придать форму нашему базовому примеру, мы сконцентрируемся только на одном типе медиа-запроса: медиа-запрос минимальной ширины. Правила CSS в этом типе медиа-запроса применяются только в том случае, если область просмотра имеет или превышает определенную ширину.Точную минимальную ширину можно указать с помощью множества различных единиц длины, включая проценты, em, rem и px. В CSS медиа-запрос минимальной ширины записывается так:

  @media screen и (min-width: 800px) {
  
}
  

Директива @media сообщает браузеру, что мы запускаем медиа-запрос, часть screen (объявление screen технически не требуется в этой ситуации, но мы рассмотрим это подробно в Глава 3 , Media Запросы - Поддержка различных окон просмотра () сообщает браузеру, что эти правила должны применяться ко всем типам экранов.Затем у нас есть ключевые слова и , которые объединяют другой набор условных выражений, которым в данном случае является (min-width: 800px) . Это говорит браузеру, что правила также должны быть ограничены всеми окнами просмотра шириной не менее 800 пикселей.

Я полагаю, что это был Брайан Ригер, http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu, который первым написал, что «Отсутствие поддержки медиа-запросов на самом деле является первым медиа-запросом. запрос." Он имел в виду, что первые правила, которые мы пишем вне медиа-запроса, должны быть нашими стартовыми или «базовыми» правилами для самых простых устройств, которые мы затем улучшаем для более функциональных устройств и больших экранов.

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

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

Изменение примера для большего экрана

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

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

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

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

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

Рисунок 1.7: Добавив несколько правил в медиа-запрос, мы получаем другой макет для больших экранов

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

Есть еще несколько визуальных украшений, которые не способствуют пониманию того, что происходит в процессе реагирования, поэтому я пропустил их здесь, но если вы хотите просмотреть соответствующий код, загрузите код главы по адресу http: // rwd.образование.

Вот стили макета, которые были добавлены:

  @media screen и (min-width: 800px) {
  .IntroWrapper {
    дисплей: таблица;
    table-layout: фиксированный;
    ширина: 100%;
  }
  .MoneyShot,
  .IntroText {
    дисплей: таблица-ячейка;
    ширина: 50%;
    вертикальное выравнивание: по центру;
    выравнивание текста: центр;
  }
  .IntroText {
    набивка: 0,5 бэр;
    размер шрифта: 2,5 бэр;
    выравнивание текста: слева;
  }
  .Ingredients {
    размер шрифта: 0,9 бэр;
    float: right;
    набивка: 1 бэр;
    маржа: 0 0 0.5рем 1рем;
    радиус границы: 3 пикселя;
    цвет фона: #ffffdf;
    граница: 2px solid # e8cfa9;
  }
  .Ingredients h4 {
    маржа: 0;
  }
}
  

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

Теперь наша базовая адаптивная страница на iPhone выглядит так:

Рисунок 1.8: Добавлено еще несколько стилей, и наша основная страница приятна

И вот так, когда область просмотра составляет 800 пикселей или больше:

Рисунок 1.9: Тот же HTML и CSS, но другой макет для больших окон просмотра

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

Давайте просто рассмотрим важные части того, что мы рассмотрели в этой главе и еще раз в этом базовом примере:

• Используйте любой текстовый редактор, который вам нравится
• Существуют инструменты, облегчающие написание кода, но не зацикливайтесь на том, что использовать
• Адаптивный дизайн стал возможен благодаря гибкой компоновке, плавным изображениям и медиа-запросам
• В заголовке HTML-кода необходим метатег , чтобы браузер знал, как отображать страницу.
• Вы хотите, чтобы все изображения были установлены с максимальной шириной 100% в CSS по умолчанию
• Точка останова - это просто точка, обычно шириной экрана, в которой мы используем медиа-запрос для изменения дизайна.
• Когда вы пишете CSS для адаптивного дизайна, начните с базовых стилей, которые могут работать на любом устройстве - обычно это самый маленький экран, а затем используйте медиа-запросы, чтобы адаптировать его для больших экранов.
• Булочки со взбитыми сливками и джемом действительно вкусные

Недостатки нашего примера

В этой главе мы рассмотрели все основные составляющие построения базовой адаптивной веб-страницы с помощью HTML и CSS.Конечно, это не то, что я бы назвал настоящим красавцем. Я бы простил вас за использование таких слов, как «инфантильный», «ленивый» и «уродливый», но просто делайте это тихо между собой; Знаете, у меня есть чувства!

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

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

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

Как проверить кроссбраузерность адаптивного веб-дизайна

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

Процесс оставался жизнеспособным, поскольку размеры экрана продолжали увеличиваться с 800 × 600 до 1024 × 768 и выше.Однако распространение смартфонов и выпуск iPhone в 2007 году изменили эту тенденцию. Сегодня более половины пользователей получают доступ к веб-страницам с мобильных устройств меньшего размера.

Примечание. Технически смартфоны часто имеют более высокое разрешение, чем многие мониторы, но отдельные пиксели становятся невидимыми. IPhone 11 Max переводит свое аппаратное разрешение 2688 x 1242 в более практичное логическое разрешение 896 x 414. Каждый логический пиксель отображается в сетку размером 3 × 3 реальных пикселя, что обеспечивает более плавные шрифты и повышенную детализацию изображения.

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

Наконец, термин Responsive Web Design (RWD) был изобретен Итаном Маркоттом в 2010 году. Этот метод позволял одному и тому же сайту работать на любом устройстве независимо от размера экрана или размеров области просмотра.

Как работает задний привод?

Не существует единого подхода или технологии RWD.

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

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

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

В следующих разделах представлен ряд технических вариантов реализации.

HTML

Независимо от какой-либо техники RWD, следующий тег должен быть должен быть установлен в вашем HTML :

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

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

Медиа-запросы были основной основой первых сайтов RWD. Они позволяют CSS ориентироваться на определенные диапазоны размеров области просмотра. Например:

 
п {
  размер шрифта: 1 бэр;
}


@media (min-width: 900px) и (max-width: 1200px) {

  п {
    размер шрифта: 1,5 бэр;
  }

}
  

Медиа-запросы все еще используются, хотя теперь доступны менее явные параметры.

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

  <картинка>

  
  

  
  


  

Единицы окна просмотра CSS

CSS-единицы vw и vh составляют 1% ширины и высоты области просмотра соответственно. vmin составляет 1% от наименьшего измерения, а vmax составляет 1% от наибольшего измерения.

Они обеспечивают гибкость RWD, особенно при использовании вместе с calc . Например:

 
п {
  размер шрифта: 1rem + 0,5vw;
}
  

Столбцы CSS

CSS позволяют создавать несколько текстовых столбцов по мере увеличения размеров контейнера.Например:

 
.container {
  колонки: 12рем авто;
  столбец-зазор: 2 бэр;
}
  

CSS Flexbox и сетка

CSS Flexbox и CSS Grid предоставляют современные методы размещения дочерних элементов в зависимости от их содержимого и доступного пространства. Основное отличие:

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

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

 
.grid-container {
  дисплей: сетка;
  столбцы-шаблон-сетки: повторение (автоподгонка, минмакс (20rem, 1fr));
  сетка-зазор: 1бэр;
}
  

Параметры JavaScript RWD

JavaScript также может использоваться для определения размеров области просмотра и соответствующей реакции.Например:

 
const
  vw = window.innerWidth,
  vh = window.innerHeight;
  

Точно так же размеры отдельного элемента можно проверить с помощью offsetWidth и offsetHeight, хотя метод getBoundingClientRect () может возвращать больше информации, включая доли пикселя:

  конст.
  element = document.getElementById ('myelement'),
  rect = element.getBoundingClientRect (),
  ew = rect.width,
  eh = rect.height;
  

Размеры окна и элемента могут изменяться при повороте устройства или изменении размера окна браузера. matchMedia API может анализировать медиа-запросы CSS и инициировать события изменения:

 
const mql = window.matchMedia ('(минимальная ширина: 600 пикселей)');


mqTest (mql);


mql.addListener (mqTest);


function mqTest (e) {

  if (e.matches) {
    console.log ('ширина области просмотра не менее 600 пикселей');
  }
  еще {
    console.log ('ширина области просмотра меньше 600 пикселей');
  }

}
  

Поддержка браузера

Технологии RWD, прежде всего, предлагают хорошую поддержку браузера. Самый последний вариант - CSS Grid - поддерживается почти 95% браузеров, используемых сегодня.Однако по-прежнему необходимо протестировать свой сайт на различных устройствах, разрешениях и браузерах…

Тестирование в браузере

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

В Firefox выберите Responsive Design Mode из меню Web Developer или нажмите Ctrl | Cmd + Shift + M :

В браузерах на основе Chromium откройте Инструменты разработчика из меню Дополнительные инструменты или нажмите Ctrl | Cmd + Shift + I .Затем нажмите Панель инструментов Toggle device icon:

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

В Safari включите Показать меню «Разработка» в строке меню на вкладке Advanced браузера Preferences . Загрузите страницу и выберите Enter Responsive Design Mode из меню Develop .

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

• Возможности рендеринга

  Браузер будет использовать собственный механизм визуализации, а не эмулируемое устройство. Функция CSS, работающая в Firefox, будет «работать» в эмулированном представлении iPhone независимо от фактической поддержки. Тем не менее, рабочий стол Chrome будет показывать разумное приближение к Android Chrome, а macOS Safari будет похож на iPhone, потому что они основаны на тех же механизмах рендеринга.

• Старые устройства

  Тестирование представления браузера iPhone в последней версии Safari не может точно представить старые устройства с устаревшими операционными системами и программным обеспечением.

• Дисплеи высокой плотности

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

• Сенсорный

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

• Скорость обработки

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

Эмуляторы мобильных ОС

Запуск виртуальной машины Android или iOS на вашем устройстве позволяет вам устанавливать и запускать настоящие мобильные браузеры и использовать их фактические механизмы рендеринга.

включают:

• Genymotion: бесплатные и коммерческие облачные решения, все версии Android для Windows, macOS и Linux
• Android Studio (и эмулятор): бесплатно, Windows, macOS и Linux
• Visual Studio Xamarin (и эмуляторы): коммерческая, Windows и macOS
• Bliss OS: бесплатно, Android 9 для Windows, Linux и Chrome OS
• Phoenix OS: бесплатно, Android 7.1 или 5.1 для Windows и macOS
• Android-x86: бесплатные ISO-образы Android для любой платформы виртуальных машин.

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

Варианты для iOS более ограничены:

У этих эмуляторов есть недостатки:

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

Услуги онлайн-тестирования

Этот сегмент был создан в партнерстве с LambdaTest. Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

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

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

LambdaTest предоставляет более 2000 комбинаций устройства, ОС и браузера. Возможности включают:

• тестирование localhost страниц, запущенных на вашем компьютере разработки
Отладка
• с помощью встроенных инструментов разработчика
• Тестирование геолокации из разных мест
• автоматически сгенерированные полностраничные снимки экрана на нескольких устройствах
• встроенный трекер проблем
Программное обеспечение браузера
• LT (Windows, macOS, Linux) для тестирования и сравнения устройств с автоматической перезагрузкой и синхронизацией прокрутки
• API автоматизированного тестирования на основе селена
• Поддержка 24/7
• бесплатный план с неограниченным доступом от 15 долларов в месяц.

Подпишитесь на бесплатную учетную запись LambdaTest…

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

Тестирование реального устройства

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

В идеале вы должны протестировать как можно больше устройств, но ваш собственный недавний смартфон может не указывать на среднее оборудование.Постарайтесь приобрести устройства среднего класса, которым исполнилось год или два, например подержанный Moto G7 или iPhone 8.

Устройства в одной сети могут получить доступ к серверу вашего ПК, введя его IP-адрес в браузере. Это можно получить с помощью ifconfig в macOS и Linux или ipconfig в Windows.

Смартфон можно также подключить к компьютеру с помощью кабеля USB. Это позволяет удаленно управлять устройством и легко получать доступ к его панелям инструментов разработчика для отладки.Этот метод различается для разных платформ, но для отладки Android Chrome в настольной версии браузера:

1. На устройстве Android выберите Параметры разработчика в настройках и включите отладку USB .
2. Подключите устройство к компьютеру с помощью соответствующего кабеля USB. При первой попытке вам может быть предложено подтвердить действия на одном или обоих устройствах.
3. Запустите Chrome на своем ПК и откройте в новой вкладке.Убедитесь, что Обнаружение USB-устройств включен.
4. При необходимости установите Перенаправление портов - например, порт 8888 на удаленном устройстве можно перенаправить на localhost: 8888 .
5. Ваше устройство должно появиться в списке. Теперь вы можете проверить новую или существующую вкладку, которая открывает инструменты разработчика устройства:

Чтобы отладить Safari для iPhone, сделайте следующее:

1. Подключите телефон к компьютеру Apple.
2. Откройте веб-страницу, которую вы хотите отладить в Safari на своем iPhone.
3. Запустите Safari на вашем компьютере.
4. В Safari на компьютере перейдите по ссылке Develop > [ваш iPhone] > [веб-сайт для проверки] . На вашем компьютере откроются инструменты разработчика Safari, что позволит вам отлаживать сайт на своем iPhone.

Один сайт, много просмотров

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

CSS - Бесплатное руководство по изучению HTML и CSS

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

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

1. Ничего не делать и позволить мобильным пользователям увеличивать масштаб, чтобы читать ваш веб-сайт
2. Создайте второй веб-сайт , например m.facebook.com, и перенаправьте мобильные устройства на этот веб-сайт
3. Используйте адаптивный веб-дизайн

Устройство, браузер, область просмотра

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

прибор

используемое оборудование: смартфон, планшет, компьютер или ноутбук

браузер

программное обеспечение работает: Firefox, Google Chrome, Safari, Internet Explorer

окно просмотра

область в браузере, которая фактически отображает веб-страницу

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

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

Отзывчивость зависит от свойств устройства или окна просмотра . Например:

• какая ширина - это область просмотра?
• Какая высота - область просмотра?
• как ориентирована область просмотра ?
• какое разрешение устройства ?

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

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

медиа-запросов

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

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

  / * Эта часть читается каждым устройством / окном просмотра * /
body {font-size: 14px;}

@media (min-width: 1200 пикселей) {
  / * Эта часть читается только окнами просмотра шире 1200 пикселей * /
  body {font-size: 16px;}
}  

Здесь размер текста по умолчанию 14px . Но для размещения больших окон просмотра размер текста установлен на 16 пикселей , если область просмотра на шире , чем 1200 пикселей .

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

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

Несколько параметров

Вы можете потребовать 2 условия для активации медиа-запроса.

  body {font-size: 18px;}

@media (min-width: 1000 пикселей) и (ориентация: альбомная) {
  body {font-size: 20px;}
}  

Размер шрифта будет установлен только на 20 пикселей , если размер области просмотра составляет не менее 1000 пикселей в ширину и в ландшафтном режиме (в отличие от портретного режима).

Вы также можете использовать не и только . Они называются логическими операторами.

Несколько правил CSS

Вы можете включить столько правил CSS , сколько хотите в медиа-запрос.

  body {font-size: 14px;}
.button {display: block;}
.title {выравнивание текста: центр;}

@media (min-width: 1200 пикселей) {
  body {font-size: 16px;}
  .container {маржа: 0 авто; width: 960px;}
  .button {display: inline-block;}
  .title {выравнивание текста: слева;}
}  

Параметры

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

Записывая @media (min-width: 1200px) , мы говорим браузеру читать этот блок , только если область просмотра шире 1200 пикселей.

ширина

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

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

Вы можете использовать:

• min-width (960px) : стили будут применяться, только если область просмотра на шире , чем 960px
• max-width (768px) : стили будут применяться, только если область просмотра на уже , чем 768 пикселей

Эти параметры принимают пикселей , ems и rems .

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

высота

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

Вы можете использовать min-height и max-height .

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

ориентация

Параметр ориентации может определять, находится ли окно просмотра в одном из следующих режимов:

• пейзаж : область просмотра на шире, , чем высота
• портрет : область просмотра на выше , чем ширина

  @media (ориентация: портретная) {
  / * Для вертикальных окон просмотра * /
}

@media (ориентация: альбомная) {
  / * Для горизонтальных видовых экранов * /
}  

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

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

разрешение

Разрешение Параметр относится к плотности пикселей устройства и может быть выражен в точках на дюйм dpi или точках на сантиметр dpcm .

Зависит от:

• какое у вас разрешение (например, 1440x900, 1280x800, 1024x768 и т. Д.)
• какая у вашего экрана диагональ (например, 11,6 дюйма, 14 дюймов, 21 дюйм и т. Д.)

Плотность пикселей в основном говорит о том, насколько четкий ваш дисплей (чем выше dpi, тем четче дисплей).

  @media (минимальное разрешение: 300 точек на дюйм) {
  / * * /
}  

Экраны настольных компьютеров обычно имеют плотность пикселей около 100 dpi. Смартфоны, с другой стороны, имеют невероятный диапазон dpi. Например:

• Nokia Lumia 640 : 332 точек на дюйм
• Apple iPhone 6+ : 401 точек на дюйм
• Google Nexus 5 : 445 точек на дюйм
• HTC One : 469 точек на дюйм
• Samsung Galaxy S6 : 577 точек на дюйм

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

Проблема, например, с изображениями на дисплеях Retina. Это длинная тема, поэтому прочтите эту статью «Методы CSS для дисплеев Retina» на сайте sitepoint.

Источник: sitepoint.com

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

  / * логотип 40x40 * /
.logo {background-image: url (Marksheet-logo.png); background-size: 40px 40px;}

@media (минимальное разрешение: 300 точек на дюйм) {
  / * Размер логотипа 80x80 изменен на 40x40 * /
  .логотип {background-image: url ([защищенный адрес электронной почты]);}
}  

Имейте в виду, что размер фона должен быть установлен . В противном случае изображение @ 2x Retina заняло бы вдвое больше места.

Суффикс @ 2x - это просто обозначение Apple для изображений Retina, которое было принято в качестве обозначения de facto по умолчанию в CSS.

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

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

Но сначала разработать версию mobile для проще , учитывая, что «HTML почти на 100% реагирует из коробки» . Большинство веб-дизайнов на мобильных устройствах ориентированы только на вертикальные макеты, без столбцов или с очень небольшим количеством столбцов, потому что на мобильных устройствах прокрутка составляет естественных .

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

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

  / * Общие правила CSS для каждого окна просмотра, включая смартфоны * /
тело{ }
.заглавие{ }
.кнопка{ }

@media (min-width: 768 пикселей) {
  / * Правила для планшетов и больших окон просмотра * /
}

@media (min-width: 992px) {
  / * Правила для ноутбуков, маленьких экранов рабочего стола и больших окон просмотра * /
}

@media (min-width: 1200 пикселей) {
  / * Правила только для больших экранов рабочего стола * /
}  

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

  / * Общие правила CSS для каждого окна просмотра, включая большие экраны рабочего стола * /
тело{ }
.заглавие{ }
.кнопка{ }

@media (max-width: 1199 пикселей) {
  / * Правила для ноутбуков, небольших экранов рабочего стола и небольших окон просмотра * /
}

@media (max-width: 991px) {
  / * Правила для планшетов и небольших окон просмотра * /
}

@media (max-width: 767 пикселей) {
  / * Правила только для смартфонов * /
}  

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

• @media (min-width: 768px) для планшетов
• @media (max-width: 767px) не предназначен для планшетов

Адаптивный веб-дизайн: основные советы и подходы

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

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