margin при адаптивной верстке
Не могу понять одну простую вещь,- в каких единицах нужно задавать размеры отступов( margin и padding ) при адаптивной верстке.
Везде вижу разные вещи: одни задают в px другие в % или rem . Как понять, что правильно и как нужно делать?
Правильный выбор единицы измерения всегда зависит от ситуации.
Центирование блока, относительно родителя
Возьмём, к примеру, мой самый частый случай, когда надо центрировать блок:
- margin: 0 auto — Центирование по горизонтали
- margin: auto 0 — Центирование по вертикали
- margin: auto — Центрирование по обеим осям
Но всё-таки очень будет жирнейший плюс, если изучите grid и flex в CSS. Очень незаменимые вещи, так как очень сильно облегчают работу при создании резиновой вёрстки.
Вернёмся к единицам измерения. Выбирайте такие, какие на ваш взгляд будут полезны: чаще всего специалисты имеют свой индивидуальный подход к какой-либо ситуации. Их обозначения очень просты:
- px — Пиксели
- % — Процент
- vw — Процент от ширины страницы
- vh — Процент от высоты страницы
- em — Процент, относительно родительского класса
- rem — Процент, относительно элемента body
- fit-content — Минимальный вмещаемый размер
- max-content — Максимальный вмещаемый размер
Кстати, не стоит забывать про ещё одну полезную плюшку суперсилы резиновой вёрстки.
Расположение иконки текстового поля справа с отступом
Взгляните сюда. Вы видите иконку, распологающуюся на текстовом поле (которое растянуто на всю ширину блока). Я в такой ситуации задаю эту иконку через background-image: url(<путь к иконке>) , а затем запрещаю повтор через background-repeat: no-repeat , а теперь самое интересное: нужно правильно задать позицию иконки. По вертикали мы должны расположить по центру, это ясно, но как это правильно сделать по горизонтали? Всё я это веду к полезной функции под названием calc() . При помощи её мы прижимаем иконку вправо, но отступаем от правого края 10px . Выходит такое свойство:
background-position: 50% calc(100% — 10px)
Теперь сколько бы мы не сужали окно, иконка всегда будет распологаться справа с отступом.
Возможно моё объяснение выглядит немного сырым и недоделанным, но если вы хорошо изучите их свойства и используете на реальной практике, вы получите оточенные и железные навыки резиновой вёрстки. Если здесь есть профессионалы, которые видят в этом ответе ошибку, буду рад, если укажут что именно здесь не так.
Какие основные плюсы относительного значения padding в адаптивной верстке
Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Какие основные плюсы относительного значения padding в адаптивной верстке
Primer CSS is a free open-source CSS framework built on systems that lay the groundwork for basic style elements like spacing, typography, and color. Our patterns are both stable and interoperable because of their systematic structure. Object-Oriented CSS principles, core CSS, and BEM architecture inform its CSS approach. It is extremely reusable and adaptable. It was created using the GitHub design system.
Padding in CSS is a way to add space around an element’s inner contents, within any border which encloses it. In Primer CSS the global spacing scale is used to define how much padding will be added, which ensures that the horizontal and vertical padding is consistent. By using this utility, we can make different layouts using the same styles because it helps us to reduce the amount of custom CSS that can have the same characteristics.
Responsive Padding is an attribute that helps us to adjust all the padding utilities at specific breakpoints which helps us to make it responsive to different screen sizes. Each padding utility given adds padding to that specific breakpoint and sizes above it.
Responsive Padding used Class:
- p-[direction]-[breakpoint]-[spacer]: Here direction refers to the axis in which the padding will be applied, the breakpoint from which the padding will be added. The spacer refers to the value from the Primer’s global spacing scale.
- Direction can have values x/y.
- Breakpoint can have sm/md/lg values.
- Spacer can have 0-6 values.
Syntax:
Example 1: In the below given example, the padding has been increased in the x-axis when the screen size is reduced by using the responsive padding classes.
Адаптивная верстка сайтов: обзор подходов и CSS фреймворков
В настоящее время доля мобильного трафика растет стремительными темпами. С каждым днем людей, использующих девайсы с выходом в Интернет, становится все больше. Телефон всегда под рукой, в любом месте люди могут посмотреть необходимую информацию, прочитать новости и т. д. Обычный сайт можно просмотреть с помощью мобильного устройства. Однако, возникают некоторые нюансы при просмотре — для чтения отдельных блоков текста на относительно небольшом экране необходимо масштабировать страницу. Как следствие, теряется читабельность, удобство, сайт нужно постоянно пролистывать, растягивать, приближать. Многие элементы управления сайтов неудобно использовать, так как страницы не рассчитаны на управление с помощью прикосновений к экрану. Для решения этих проблем начали разрабатывать сайты, способные удобно отобразить информацию на любом устройстве.
О статье
Данная статья предназначена для разработчиков, имеющих опыт верстки сайтов, знающих HTML и CSS, понимающих назначение CSS селекторов и т. д.
В данной статье будут рассмотрены виды версток, позволяющие корректно отображать сайты на любом разрешении, техники, с помощью которых это осуществляется. Разберем понятие CSS-фреймворка и сделаем сравнительный анализ наиболее популярных.
Виды версток
Рассмотрим основные виды версток, их разницу и основные принципы, используемые при их реализации.
Фиксированная верстка
Фиксированная верстка (Fixed Layout) — подход создания страниц сайта, которые имеют заданную ширину. Ширина компонентов на странице не изменяется. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки. Данный тип верстки не подходит для удобного отображения информации на мобильных устройствах.
Пример ниже демонстрирует строгое задание ширины для тега body:
Резиновая верстка
Резиновая верстка (Elastic layout) подразумевает возможность компонентов сайта менять свои размеры в зависимости от размера окна браузера, растягиваться от и до указанных минимальных и максимальных размеров. Это достигается благодаря использованию относительных значений, max-width / min-width (максимальная / минимальная ширина), max-height / min-height (максимальная / минимальная высота).
Примеры использования техник резиновой верстки:
Адаптивная верстка
Адаптивная верстка (Adaptive Layout) позволяет подстраиваться основному контейнеру и любому другому элементу сайта под разрешение экрана, делая возможным менять размер шрифта, расположение объектов, цвет и т. д. Происходит это динамически, например, с использованием медиа-запросов (@media), позволяющих автоматически определять разрешение монитора, тип устройства и подставлять указанные значения в автоматическом режиме. В примере ниже задается ширина div равная 960px для всех устройств, ширина которых меньше 1200px и 320px для всех устройств, ширина которых меньше 480px.
Отзывчивая верстка
Отзывчивая верстка (Responsive Layout) — это объединение резиновой и адаптивной вёрстки. При данном подходе используются как медиа-запросы, так и процентное задание ширины компонентов. Используя данный вид верстки можно с уверенностью сказать, что сайт приспособится к любому устройству.
Ниже задается ширина div равная 50% от размера родительского компонента для всех устройств, ширина которых меньше 1200px и 100% для всех устройств, ширина которых меньше 480px.
Основные техники реализации сайтов под любое разрешение
Относительные значения
Использование относительных значений позволяет отобразить информацию и компоненты на странице без потери читабельности и удобства просмотра.
Относительные значения для размеров и отступов
Относительные значения можно задавать для width, height, margin, padding и т. д. Самый известный способ задания относительного размера — указание в процентах (%).
Ниже приводится пример задания ширины равной 90% от размера родительского компонента.
При этом значение высчитывается относительно родительского компонента.
Также существуют значения относительно размера экрана:- vw — 1% ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента;
- vh — 1% высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента;
- vmin — выбирается наименьшее из vw и vh;
- vmax — выбирается наибольшее из vw и vh.
Ниже рассмотрен пример использования vw и vh. В данном случае ширина и высота тега div будут равны 50% от ширины и высоты экрана соответственно.
Относительные значения для размера шрифта
Существуют следующие относительные значения для шрифтов:
- em — задаёт размер относительно шрифта родителя;
- rem — задаёт размер относительно шрифта <html>.
Вычислим размер шрифта для тега body. В данном примере размер шрифта для body задается относительно размера html. Таким образом, размер шрифта для body будет равен 30px (20px * 1.5 = 30px).
Также относительные размеры шрифта можно задавать с помощью %, vw, vh и т. д. В следующем примере размер шрифта для body равен 80% от размера шрифта html — 16px.
Максимальные и минимальные размеры компонентов
Для задания максимальных и минимальных значений ширины и высоты компонента используются свойства max-width / min-width и max-height / min-height соответственно.
Допустим, что родительским компонентом данного div является body. Тогда, при изменении ширины экрана, ширина данного компонента будет составлять 60% от ширины body. Однако он будет увеличиваться только до величины, определенной в max-width, это 500px. Как только контейнер достигнет этой ширины — он перестанет увеличиваться.
Использование медиа-запросов
Медиа-запросы позволяют задать стили для определенного размера экрана, типа устройства на основе характеристик устройства и т. д. Все медиа-запросы начинаются с @media, а далее следует условие.
С помощью медиа-запросов можно задать стили для следующих типов устройств:
- all — все типы (значение используется по умолчанию)
- braille — устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми
- embossed — принтеры, использующие для печати систему Брайля
- handheld — смартфоны и аналогичные им аппараты
- print — принтеры и другие печатающие устройства
- projection — проекторы
- screen — экран монитора
- speech — речевые синтезаторы, а также программы для воспроизведения текста вслух
- tty — устройства с фиксированным размером символов
- tv — телевизоры.
Пример задания ширины для тега div, на экранах мониторов, смартфонах и т. п.
Ссылки по техникам реализации адаптивной верстки
Подробнее просмотреть и изучить рассмотренные в данной статье подходы и другие можно по ссылкам:
CSS-фреймворки
CSS-фреймворк — фреймворк, созданный для упрощения работы верстальщика, быстроты разработки и исключения максимально возможного числа ошибок вёрстки (проблемы совместимости различных версий браузеров и т. д.). Данные фреймворки подразумевают использование различных подходов для корректного отображения сайтов на устройствах любого размера.
Многие разработчики предпочитают использование CSS-фреймворков, вместо прописывания всех стилей вручную. Это обусловлено следующими причинами:
- Более быстрая разработка
- Поддержка кроссбраузерности
- Поддержка различных устройств и размеров экранов
- Единообразие кода при работе в команде позволяет снизить число разногласий при разработке.
Как и библиотеки скриптовых языков программирования, CSS-библиотеки, обычно имеющие вид внешнего CSS-файла, добавляются в заголовок веб-страницы.
Рассмотрим самые популярные CSS-фреймворки.
Bootstrap
Самый популярный фреймворк для разработки адаптивных и мобильных web-проектов. Bootstrap — это инструмент с открытым исходным кодом для разработки сайтов с помощью HTML, CSS и JS. Bootstrap — интуитивно простой и в тоже время мощный интерфейсный фреймворк, повышающий скорость и облегчающий разработку web-приложений.
Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода — от телефонов и планшетов до настольных компьютеров. Для этого используется 12-колоночная сетка:
В дополнение к CSS данный фреймворк включает в себя поддержку двух самых популярных CSS-препроцессоров: Less и Sass.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов
- Поддержка Less и Sass
- Использование Normalize.css.
Material Design for Bootstrap
Material Design for Bootstrap — это инструментарий с открытым исходным кодом для разработки приложений, основанный на Bootstrap и использующий подходы Material Design.
Фреймворк позволяет быстро создавать приложение с помощью переменных Sass, адаптивной сетки, большого количества готовых компонентов и мощных плагинов, реализованных на jQuery.- 12 — колоночная сетка
- Большое количество готовых для использования компонентов в соответствии с концепцией Material Design.
Materialize
Materialize — современная, адаптивная платформа, построенная на принципе материального дизайна. В платформу включен набор компонентов, а также стили для них. Проработаны анимации и эффекты в компонентах, чтобы они были максимально плавными. Все элементы и анимации интуитивны и понятны пользователю, а единый адаптивный дизайн упрощает UX для всех платформ.
- 12 — колоночная сетка
- Большое количество готовых для использования компонентов в соответствии с концепцией Material Design
- Поддержка Sass.
Bulma
Bulma — современный CSS-фреймворк основанный на новом способе отображения Flexbox. Flexbox — самый современный инструмент компоновки, доступный в CSS.
