Responsive css: Responsive Web Design Introduction

Responsive Web Design Viewport видовой экран CSS уроки для начинающих академия

❮ Назад Дальше ❯

---

Что такое запрос носителя?

Медиа-запрос — это метод CSS, представленный в CSS3.

Он использует правило @media для включения блока свойств CSS только в том случае, если определенное условие имеет значение true.

Пример

Если окно браузера 600px или меньше, цвет фона будет lightblue:

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

---

Добавление точки останова

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

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

Рабочий стол

Телефон

Используйте запрос носителя для добавления точки останова в 768px:

Пример

Когда экран (окно браузера) получает меньше, чем 768px, каждый столбец должен иметь ширину 100%:

/* For desktop: */
. col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}

.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*=»col-«] {
        width: 100%;
    }
}

---

---

Всегда дизайн для мобильных первых

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

Это означает, что мы должны внести некоторые изменения в нашем CSS.

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

Пример

/* For mobile phones: */
[class*=»col-«] {
    width: 100%;
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    . col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}

    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

---

Другая точка останова

Можно добавить столько точек останова, сколько вам нужно.

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

Рабочий стол

Планшет

Телефон

Мы делаем это, добавив еще один медиа-запрос (на 600px), и набор новых классов для устройств больше, чем 600px (но меньше, чем 768px):

Пример

Обратите внимание, что два набора классов почти идентичны, единственным отличием является имя ( col- и col-s- ):

/* For mobile phones: */
[class*=»col-«] {
    width: 100%;
}
@media only screen and (min-width: 600px) {
    /* For tablets: */
    . col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}

    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

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

Пример HTML

Для рабочего стола:

Первый и третий разделы будут охватывать по 3 столбца. Средняя секция будет охватывать 6 столбцов.

Для планшетов:

Первый раздел будет охватывать 3 колонки, второй будет охватывать 9, а третий раздел будет отображаться ниже первых двух разделов, и он будет охватывать 12 столбцов:

<div>
  <div>…</div>
  <div class=»col-6 col-s-9″>…</div>
  <div class=»col-3 col-s-12″>…</div>
</div>

---

Типичные точки останова устройства

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

Пример

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {…}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {…}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {. ..}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {…}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {…}

---

Ориентация: портрет/пейзаж

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

Вы можете иметь набор свойств CSS, которые будут применяться только в том случае, если окно обозревателя шире, чем его высота, так называемая «Ландшафтная» ориентация:

Пример

Веб-страница будет иметь лигхтблуе фон, если ориентация находится в альбомном режиме:

@media only screen and (orientation: landscape) {

    body {
        background-color: lightblue;
    }
}

---

Скрытие элементов с помощью запросов мультимедиа

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

Я буду скрыта на маленьких экранах.

Пример

/* If the screen size is 600px wide or less, hide the element */
@media only screen and (max-width: 600px) {
  div.example {
    display: none;
  }
}

---

Изменение размера шрифта с помощью запросов мультимедиа

Также можно использовать запросы мультимедиа для изменения размера шрифта элемента на различных размерах экрана:

Пример

/* If the screen size is 601px or more, set the font-size of <div> to 80px */
@media only screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px or less, set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

---

CSS @media ссылка

Для полного обзора всех типов носителей и функций/выражений, пожалуйста, посмотрите на @media правило в нашей ссылке CSS.

❮ Назад Дальше ❯

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

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

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

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

Новичок в селекторах CSS? Ознакомьтесь с этой шпаргалкой Ultimate CSS Selector, чтобы повысить свою карьеру веб-дизайнера.

СОДЕРЖАНИЕ

• Что такое медиазапросы в CSS?
• Действительно ли нам нужны медиа-запросы в CSS?
• Как вы пишете медиа-запросы в CSS для адаптивного дизайна?
• Правила медиа-функции
• Точки останова и их методы
• Кроссбраузерная совместимость для медиазапросов в CSS
• Часто задаваемые вопросы (FAQ)

Что такое медиа-запросы в CSS

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

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

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

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

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

Проверка совместимости медиазапросов CSS в более чем 3000 браузерных средах. Попробуйте лямбда-тест прямо сейчас!

Действительно ли нам нужны медиа-запросы CSS?

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

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

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

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

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

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

С другой стороны, спецификации CSS фиксированы. Сетки CSS всегда будут работать со структурой «сетка», но медиа-запросы можно использовать со многими другими параметрами. Это достаточно хорошо для использования, если требования вашего проекта могут быть выполнены с новыми спецификациями! Тем не менее, медиа-запросы придут вам на помощь, чтобы разработать что-то новое и креативное.

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

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

Как вы пишете медиа-запросы в CSS для адаптивного дизайна?

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

Медиа-запрос может быть реализован словом «медиа» следующим образом:

Соединитель @media ( )

@media Соединитель ( )

Например:

Только экран @media и (максимальная ширина: 480 пикселей) { /* применяемые правила CSS /* }

Только экран @media и (максимальная ширина: 480 пикселей) {   /* Применяемые правила CSS /* }

Этот медиа-запрос будет искать экраны («только экран», как написано) с максимальной шириной 480 пикселей. Если он его найдет, условия будут выполнены, и в HTML-код будут внесены изменения.

Для применения только типа мультимедиа, а не выражений мультимедиа (запросов), допустимы следующие значения:

• все
• печать
• экран
• речь

@медиа печать { . заголовок { размер шрифта: 12px } }

@media print {    .heading { размер шрифта: 12px    } }

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

Правила функций мультимедиа

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

Правила медиа-функций ширины и высоты

Первое правило медиа-функций, которое следует учитывать, — это проверка ширины и высоты окна просмотра. Операции с шириной можно проверить с помощью свойств «width», «max-width» и «min-width» для значений узких мест.

Пример правила медиа-функции максимальной ширины:

Экран @media и (максимальная ширина: 840 пикселей){ п { красный цвет; } }

@экран мультимедиа и (макс. ширина: 840 пикселей){   p { цвет: красный; } }

Полный код для создания адаптивного дизайна с помощью медиа-правил можно записать так:

<голова> <мета-кодировка="utf-8"> <стиль> Экран @media и (максимальная ширина: 840 пикселей){ п { красный цвет; } } <тело> <центр>

Проверка правил обработки мультимедиа

1 2 3 4 5 6 7 8 10 110003 12 13 14 1999911110001 9000 2 14 9000 3 9000 3 9000 3 9000 2 9000 2 14 9000 3 9000 3 9000 2 9000 3 9000 3 9000 3 18 19 20

<Центр> Проверка правил среды

Для экрана шириной более 840 пикселей тег «p» будет отображать содержимое черным цветом следующим образом:

Приведенный выше снимок экрана сделан на платформе LambdaTest.

На экране шириной менее 840 пикселей правило мультимедиа изменит содержимое на красный цвет и размер шрифта следующим образом:

окно просмотра, чтобы увидеть эффект.

Используемый выше браузер — Opera на платформе Windows 10. Точно так же вы можете использовать правило высоты и ширины.

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

СКАЧАТЬ LT БРАУЗЕР

Ознакомьтесь с приведенным ниже руководством по началу работы с LT Browser:

Подпишитесь на наш канал LambdaTest на YouTube и будьте в курсе последних руководств по тестированию Selenium, тестированию Cypress E2E, тестированию Playwright и многому другому.

Ориентация в медиа-запросах CSS

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

В качестве следующего примера можно применить правило ориентации носителя:

@media (ориентация: альбомная){ п { красный цвет; размер шрифта: 36px; } }

1 2 3 4 5 6

@media (ориентация: альбомная){           p {                    цвет: красный;             размер шрифта: 36 пикселей;           }         }

Приведенный выше код применит правила мультимедиа в альбомной ориентации, в то время как книжная ориентация будет работать нормально.

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

Соединители в правилах мультимедиа

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

• и
• или
• не

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

@media (ориентация: альбомная) и (минимальная ширина: 1080 пикселей){ п { красный цвет; размер шрифта: 36px; } }

1 2 3 4 5 6

@media (ориентация: альбомная) и (минимальная ширина: 1080 пикселей){           p {             цвет: красный;             размер шрифта: 36 пикселей;           }         }

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

@media (ориентация: альбомная), (минимальная ширина: 1080 пикселей){ п { красный цвет; размер шрифта: 36px; } }

1 2 3 4 5 6

@media (ориентация: альбомная), (минимальная ширина: 1080 пикселей){           p {              цвет: красный;             размер шрифта: 36 пикселей;           }         }

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

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

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

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

(минимальная ширина: 640 пикселей) и (максимальная ширина: 1080 пикселей)

(минимальная ширина: 640 пикселей) и (максимальная ширина: 1080 пикселей)

Может быть записан со спецификацией уровня 4 следующим образом:

(640 пикселей <= ширина <= 1080 пикселей)

(640 пикселей <= ширина <= 1080 пикселей)

Что немного лучше и понятнее в определении правил мультимедиа. Однако ограничений для разработчика нет; оба могут быть использованы для достижения отзывчивости.

Вы также можете обратиться к приведенному ниже руководству по проведению адаптивного тестирования на платформе LambdaTest.

Точки останова и их методы

В посте до сих пор показано, как добиться адаптивного веб-дизайна с помощью медиа-запросов в CSS, правил и выражений. Забавно управлять элементами и видеть, как они трансформируются в соответствии с нашими желаниями. Но проблема в том, как решить, в какой момент мы хотим, чтобы эти медиа-правила применялись к элементам? 640px или 1080px или что-то еще? Это число, которое работает как точка отражения, называется точкой останова при выполнении медиа-запросов.

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

Лучший способ анализа точек останова — через адаптивную панель браузера. Отзывчивая панель в браузере позволяет изменять размер окна (или выбирать несколько разрешений), помогая нам быстро и точно определить узкие места.
Чтобы открыть панель в Google Chrome, откройте веб-сайт (как LambdaTest открылся в этой демонстрации).

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

Откроется адаптивная панель. Здесь вы можете настроить размеры экрана и проверить узкие места.

Обратите внимание, как меняется разрешение при уменьшении/расширении экрана (верхняя панель). Эта панель поможет разработчикам увидеть точки останова, в которых код выходит за пределы экрана. Затем то же самое можно применить к правилам для СМИ.

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

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

Кроссбраузерная совместимость для медиазапросов в CSS

Как видно на изображении ниже, кросс-браузерная совместимость для медиа-запросов в CSS действительно . Однако он не поддерживает более старые версии Internet Explorer и Mozilla Firefox.

Источник

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

Завершаем!

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

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

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

Часто задаваемые вопросы (FAQ)

Что такое медиа-запрос в CSS?

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

Можно ли использовать медиа-запросы в CSS?

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

Хариш Раджора

Я инженер по информатике. Мне нравится продолжать расти по мере роста технологического мира. Я чувствую, что нет более мощного инструмента, чем компьютер, чтобы хоть как-то изменить мир. Помимо моей специальности, я очень люблю читать книги и иногда пишу на https://www.themeaninglesslife.com.

Посмотреть профиль автора

Лучшие адаптивные CSS-фреймворки | BrowserStack

Шивани Триведи, участник сообщества, 30 сентября 2022 г.

Содержание

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

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

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

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

1.

UIkit

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

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

Преимущества:

• Разработчики могут изучить широкий спектр готовых к использованию тем и загрузить их в виде файлов CSS, SASS или LESS для внесения необходимых изменений.
• Встроенная функция анимации — еще одна важная причина, по которой UIkit входит в число лучших фреймворков CSS для создания адаптивных веб-страниц, привлекающих вашу аудиторию.
• Простой стиль и модульная архитектура — это преимущества, которые эффективно сокращают время разработки и упрощают настройку.

Ограничения:

• Иногда классы кода становится сложнее понять и настроить, что приводит к задержке процесса разработки.
• UIkit не так популярен, как его альтернативы, потому что он не предоставляет бесплатные готовые шаблоны для разработчиков.

2. Foundation

Foundation — еще одно название, которое стоит рассмотреть, если вы ищете многофункциональную CSS-инфраструктуру для адаптивного дизайна и разработки веб-сайтов.

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

Преимущества:

• Foundation CSS framework предлагает более широкие возможности для индивидуального веб-дизайна.
• Он имеет гибкие сетки с классом «Свернуть» для легкого свертывания столбцов при разработке определенных разделов страницы.
• Библиотека проверки для форм HTML5 и возможность скрыть навигацию по сайту — другие важные преимущества Foundation.

Ограничения:

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

3. Каркас

Skeleton — одна из тех ограниченных структур CSS, которые лучше всего подходят для небольших проектов. Разработчики, желающие получить больше опыта и овладеть пользовательским интерфейсом, могут начать свой путь веб-дизайна со Skeleton, «простой до смерти» платформы с ограниченным кодированием и облегченной структурой разработки. Он считается лучшей альтернативой CSS-фреймворку для проектов, не требующих масштабируемости или расширения.

Преимущества:

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

Ограничения:

• По сравнению с другими CSS-фреймворками Skeleton определенно не хватает разнообразия функций и демонстрационных опций.
• Ограниченные шаблоны и сложное прототипирование — вот некоторые причины задержки разработки.

4. Bootstrap

Bootstrap — одна из самых популярных сред CSS, используемая тысячами веб-разработчиков по всему миру. Фреймворк известен своей универсальной совместимостью, основанной на компонентах HTML и CSS, широко используемых препроцессорах, плагинах jQuery и базовой структуре с одним кодом.

Вы можете создавать проекты любого масштаба с помощью Bootstrap и его огромного набора отраслевых тем и плагинов.

Преимущества:

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

Ограничения:

• Знание программирования является основой вашей компетентности в Bootstrap. Несмотря на то, что у него есть множество вариантов настройки, вы не сможете эффективно использовать его с навыками кодирования.
• Будучи многофункциональной средой CSS с множеством встроенных опций, вам может быть трудно придумывать уникальные дизайнерские идеи.

5.

Bulma

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

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

Преимущества:

• Помимо высокой скорости отклика, модульная структура фреймворка имеет преимущество, поскольку позволяет веб-разработчикам настраивать платформу несколькими способами. шаги.
• Bulma — одна из надежных платформ CSS для быстрой настройки жизненно важных компонентов, таких как типографика, таблицы, формы, объекты мультимедиа и т. д.
• Она основана на Flexbox, который используется профессиональными разработчиками для создания модного веб-дизайна.

Ограничения:

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

6. Семантический пользовательский интерфейс

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

Он широко основан на всеобъемлющих языковых принципах, поэтому он считается одним из самых заметных проектов GitHub JavaScript. Давайте оценим полезность этого адаптивного CSS-фреймворка с более чем 3000 темами и более чем 50 компонентами, оценим его плюсы и минусы.

Преимущества:

• Поскольку фреймворк состоит из определенных компонентов, разработчики могут загружать только те элементы, которые необходимы для их проекта.
• Что касается областей настройки, Semantic UI затмевает популярность Bootstrap и других популярных сред CSS для адаптивного дизайна.
• Это хорошо документированный фреймворк, обеспечивающий полную поддержку сторонних интеграций, включая WordPress и Angular.

Ограничения:

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

7. Materialise

Это одна из тех отличительных структур CSS, которые соответствуют парадигме принципов пользовательского интерфейса Google. Основная концепция Materialize основана на упрощении координации элементов в структуре пользовательского интерфейса.

Materialise, дополненный CSS, JS и HTML, объединяет идеальную среду для быстрого реагирования и переносимости через браузер.

Преимущества:

• Фреймворк имеет несколько встроенных компонентов, которые могут значительно сократить общее время разработки и помочь разработчикам с несколькими проектами одновременно.
• Он поставляется с бесплатными плагинами для раскрывающихся списков, параллакса, диалогов и т. д., которые в совокупности повышают качество UI/UX.
• Помимо беспроблемной разработки, уникальность веб-дизайна является еще одним достоинством, привлекающим внимание разработчиков к этому фреймворку.

Ограничения:

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

Заключение  

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

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

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