При работе над новым веб-дизайном вам нужно подумать о адаптивном дизайне. Является ли сайт вы собираетесь сделать, понадобится адаптивный дизайн?
Я думаю, что все внешние сайты должны учитывать адаптивный дизайн . Есть люди, которые думают, что адаптивный дизайн не стоит того, потому что люди на мобильных устройствах могут увеличивать масштаб, чтобы увидеть, что они хотят, но я считаю, что разработчики должны сделать веб-сайт простым в использовании на любом устройстве.
Что такое адаптивный дизайн?
Адаптивный дизайн, когда ваш дизайн сайта может приспособиться к по ширине и высоте в устройстве оно просматриваемое на . Адаптивный дизайн осуществляется с помощью медиа запросов в файле CSS , чтобы изменить в стилизации ваших HTML элементов в зависимости от определенных точек прерывания установки. Просто добавьте простую ширину: 100% к некоторым элементам достаточно, чтобы сделать их отзывчивыми при просмотре на мобильных устройствах.
В контрольных точках определяют диапазон ширины , которые будут использовать различные стили CSS. Обычно это устройства разных размеров, такие как мобильные телефоны, 7-дюймовые планшеты, 10-дюймовые планшеты, 13-дюймовые ноутбуки и настольные мониторы.
Можно определить те точки останова либо как ширину пикселя или отношение пикселя мин устройства.
Приведенный ниже код поможет вам начать с медиа-запросов .
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}Определение Viewport
Окно просмотра мета — тег сообщает браузеру , как вести себя , когда он оказывает на веб — странице, вы можете сказать ему , насколько большой видовой экран будет.
Видовой экран является раздел на странице в поле зрения, пример просматривает веб — страницу на мобильном устройстве, если оно увеличено , чтобы отобразить на верхнем левом углу на странице , то видовой экран был установлен , чтобы быть определенной ширины. Если вы можете увидеть на всю ширину на странице , но она масштабируется, чтобы уместить его на на экране, то видовой экран был настроен для отображения на всю ширину на веб — странице.
Пример использования в окно просмотра мета — тег ниже.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">Это определяет , что ширина в окне просмотра будет же , как и в устройстве вы просматриваете на веб — сайт на. Масштаб на сайте будет установлен на 100% , а максимальный масштаб устанавливается на 100%.
Различные мобильные браузеры имеют различные видовые по умолчанию, большинство мобильных браузеров используют значение по умолчанию 980px ширина окна просмотра , который означает , что он будет оказывать на веб — страницу в окне просмотра 980px и уменьшить масштаб, чтобы соответствовать все на веб — страницы на.
Чем меньше экран устройства, на котором вы просматриваете этот веб-сайт, тем больше будет его уменьшенное изображение. Если сравнивать с той же веб — страницы на iPhone и IPad на странице iPhone будет увеличено больше , чем просмотр на страницу на на IPad.
Изменение в значении в в окне просмотра позволит вам настроить , как мобильные устройства визуализации вашего сайта.
Viewport Ширина
Ширина , что вы определяете в в окне просмотра , как говорил в браузере этого веб — страница лучше просматривать в этих ширинах. Если вы настроили веб — страницу , которая лучше всего рассматривать на iPhone , то вы будете устанавливать в окно просмотра , чтобы быть 320px.
<meta name="viewport" content="width=320">Но это не очень хорошо для адаптивных дизайнов, так как если вы просматриваете эту страницу на планшете, ваша веб-страница будет уменьшена, чтобы просто просмотреть область размером 320 пикселей. Лучше всего сделать для адаптивного дизайна, чтобы установить в ширину на видовом быть же , как и то , что устройство используется.
<meta name="viewport" content="width=device-width">Viewport Scaling
На мобильных устройствах вы можете использовать щепоткой жест , чтобы увеличить на страницы и выйдет, но если вы установите на видовой экран , чтобы быть ширина в устройстве не нужно увеличить, чтобы увидеть на веб — страницу. Для того, чтобы убедиться , что вы веб — страница не увеличены , когда первоначально отображается вы можете использовать свойство начального масштаб , чтобы установить на масштаб по умолчанию.
Чтобы удостовериться, что пользователю не нужно увеличивать изображение при посещении вашей страницы, установите это значение равным 1.
<meta name="viewport" content="initial-scale=1">Если вы хотите вообще отключить прокрутку своего пользователя, вы можете установить максимальное значение свойства равным 1, чтобы больше не масштабировать.
<meta name="viewport" content="maximum-scale=1">Примеры видовых экранов
На изображениях ниже показаны примеры просмотра одного и того же изображения в двух разных видовых экранах. В Первое изображение показывает изображение в по умолчанию видового экрана 980 пикселей, второе изображение же изображение , но если смотреть в окне проекции 320 пикселей.
Источник изображения: Apple, объяснение метатега области просмотра .
Понимание Viewport
Если вы хотите , чтобы увидеть некоторые примеры использования в другое окно просмотра размеров есть хороший проект Github который показывает несколько видовых экранов расстановок. При нажатии на в связи является мобильный браузер покажет вам , как они выглядят.