Адаптация под мобильные устройства css: Правило @media CSS для адаптации сайтов под мобильные устройства.

Leave a Comment / Css / By /

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

Вопрос задан

Изменён 2 года назад

Просмотрен 1k раз

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

  • html
  • css

Для адаптации используют @media запросы CSS. Синтаксис такой:

@media(Условие){
стили
}

Например,

@media(max-width: 992px){
/*Стили, на устройствах с максимальной ширеной экрана 992 пикселя и меньше */
}
@media(max-width: 768px){
/*Стили, на устройствах с максимальной ширеной экрана 768 пикселей и меньше */ 
}
@media(max-width: 500px){
/*Стили, на устройствах с максимальной ширеной экрана 500 пикселей и меньше */
}

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

Еще стоит почитать про подходы к адаптивной верстке mobile-first и desktop-first. Сравнивают их во многих статьях, например, тут.

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

  1. Писать только один экземпляр медиа-запроса, как выше и в конце файла css, что не всегда удобно.
  2. Использовать сборщики с предустановленными плагинами, которые автоматизируют рутинные задачи верстки (подключение и конвертация шрифтов, сжатие картинок, группировка медиа-запросов, подстановка префиксов для разных браузеров). Я использую для этого сборку gulp с плагином gulp-group-css-media-queries и некоторыми другими. Хороший гайд по настройке найдите в ютубе, сборок тьма.
    Есть еще сборщик webpack, говорят он лучше, точно новее, но с ним не работал, так как привык к gulp.

Варианта по идее только 2. Вы можете использовать поддомен для сайта и на нем размещать отдельную версию сайта, созданную для удобного просмотра на смартфонах. Или же, более оптимальный и менее затратный вариант — вы используете для этих целей CSS. А именно — медиа запросы. Суть в том, что например, при ширине окна браузера < 400px, можно изменять нужные вам стили, скрыть какие-то блоки, например, скрывать боковые блоки меню. А при ширине окна > 800px — отображать элементы, которые рассчитаны на десктопную версию шаблона. Гуглите в сторону медиа запросов, это очень полезная и нужная вещь, если вы хотите создать сайт с адаптивным и отзывчивым шаблоном!

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Адаптация сайта на мобильных устройствах — студия Палыча

    org/BreadcrumbList»>
  • Главная
  • Вредные советы

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

<meta name="viewport" content="width=device-width">

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

Для более детальной настройки отображения используем дополнительные значения

Ширина сайта на экранах мобильных устройств

Позволяет адаптировать ширину сайта под ширину экрана устройства

<meta name="viewport" content="width=device-width">

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

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

<meta name="viewport" content="width=600">

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

Нужно еще учитывать то обстоятельство что задав фиксированную ширину отображения контента мы получим одинаковый результат на разных разрешениях экрана. Но все равно при любом разрешении самого экрана страница будет отображаться на весь экран. Это даст нам два основных преимущества.
  • Мы получим одинаковое отображение на различных разрешениях экранов.
  • Нам нужно менять стили только для этого медизапроса, а не подстраивать под каждое разрешение экрана.
@media screen and (max-width: 600px) {
    …
}

Высота сайта на экранах мобильных устройств

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

Для исправления этой ошибки мы можем использовать правило

<meta name="viewport" content="height=device-height">

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

<meta name="viewport" content="user-scalable=yes">

Запретить масштабирование на мобильном телефоне:

<meta name="viewport" content="user-scalable=no">

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

В наш медиазапросе создали необходимые для нас стили.

Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)

Viewport:

<meta name="viewport" content="height=device-height,width=600,user-scalable=yes">

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

@media screen and (max-width: 600px) {
    body {
        font-size:1.5em;
    }
    …
    h3 {
        font-size:2.5em;
    }
}

рис.1 Отображение сайта без метатега viewport

рис.2 Отображение сайта с атрибутом width=device-width

рис.3 Отображение сайта с атрибутом width=600

Верный viewport

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

<meta name="viewport" content="width=device-width, user-scalable=yes">

Читайте также

  1. Фреймворк для адаптивной верстки
  2. Адаптивная верстка для мобильных устройств

css — Адаптивный дизайн не уменьшает масштаб с мобильных устройств [@media query]

спросил

Изменено 6 лет, 6 месяцев назад

Просмотрено 2к раз

Я новичок в этом и не очень понимаю, почему это происходит и как это решить.

Я создаю свой веб-сайт с запросами @media, чтобы он был удобен для мобильных устройств. Когда я захожу на сайт с мобильного устройства, я вижу мобильную версию, как и должно быть, но когда я пытаюсь переключиться на рабочий стол, мобильная версия остается, а рабочий стол (обычный) не отображается .

С моим файлом *.css я сделал следующее:

 мои стили для глобального (нормального - рабочего стола) просмотра
...
...
...
@медиа (максимальная ширина: 500 пикселей){
мои стили для просмотра на мобильных устройствах
}

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

Надеюсь на вашу помощь

  • css
  • мобильный
  • адаптивный дизайн
  • медиа-запросы

2

Всегда убедитесь, что вы включили следующий тег в элемент :

Тег viewport

используется для отображения вашего веб-сайта в определенном стиле независимо от устройства. Свойство width управляет размером области просмотра (виртуальное «окно») и может быть установлен на определенный размер в пикселях или ширину устройства. Свойство initial-scale управляет уровнем масштабирования при загрузке страницы. максимальный масштаб , минимальный масштаб и масштабируемый пользователем управляют тем, как пользователям разрешено увеличивать масштаб страницы.

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

1

Медиа-запросы не поддерживаются только браузерами IE 5–8. IE 9+ поддерживает. Менее 1% просмотров моего веб-сайта происходит из браузера Internet Explorer, поэтому, на мой взгляд, я бы не стал жертвовать хорошим дизайном ради IE. Я бы порекомендовал всегда сначала кодировать мобильные устройства, а затем реализовывать спецификации размера.

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

Я бы не стал использовать max-width:500px , так как это случайная максимальная ширина… Придерживайтесь правильных значений, и ваш CSS будет выглядеть так:

 *-- ПОСКОЛЬКУ МЫ ПИШЕМ МОБИЛЬНОЕ -ВО-ПЕРВЫХ, НАМ НЕ НУЖЕН МЕДИА-ЗАПРОС ДЛЯ ЭТОГО --*/
Введите весь базовый код здесь
/*-- ПЛАНШЕТ --*/
@media (минимальная ширина: 641px) {
    ...
}
/*-- МАЛЕНЬКИЙ РАБОЧИЙ СТОЛ --*/
@media (минимальная ширина: 768 пикселей) {
    ...
}
/*-- РАБОЧИЙ СТОЛ --*/
@media (минимальная ширина: 992 пикселя) {
    ...
}
/*-- БОЛЬШОЙ РАБОЧИЙ СТОЛ (используется редко, но может быть полезен) --*/
@media (минимальная ширина: 1280 пикселей) {
    ...
}

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

Зарегистрируйтесь или войдите в систему

Зарегистрироваться с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — укажите точку разрыва строки для мобильного/адаптивного дизайна

спросил

Изменено 8 месяцев назад

Просмотрено 43к раз

Мне нужно разорвать линию в определенной точке в мобильных/маленьких представлениях. Например, я бы хотел, чтобы текст « Commune : CENON-SUR-VIENNE » прерывался после двоеточия. Есть ли синтаксис, который позволяет указать это вручную, а не оставлять Bootstrap CSS делать это автоматически?

Ниже я привожу фрагмент своего HTML-кода. Я хорошо указал метатег внутри :

Скриншот:

Код HTML:

 

  <дел>
    <дел>
      <дел>
         
Коммуна: СЕНОН-СЮР-ВЬЕН
  • CSS
  • twitter-bootstrap
  • twitter-bootstrap-3
  • разрывы строк

вы можете попробовать это. https://jsfiddle.net/5vwh56f8/1/

Помещение второго слова в диапазон и добавление встроенного блока стиля.

 <дел>
<дел>
<дел>
  <дел>
   
Коммуна: 
СЕНОН-СЮР-ВЬЕН