NEXT
Обновление
Данная тема появится после следующего обновления документации, обновления выходят каждые 12 дней
Адаптация под экраны
Как происходит адаптация под разные экраны? Возможно некоторым покажется, что тема довольно сложная, на самом деле это не так.
Адаптировать элементы очень легко, но вам для начала стоит изучить HTML, CSS и Селекторы. Научится создавать селекторы и после практики переходить в эту тему.
Адаптировать элементы очень легко, но вам для начала стоит изучить HTML, CSS и Селекторы. Научится создавать селекторы и после практики переходить в эту тему.
Адаптация происходит через CSS. То-есть все в тегах <style></style>
Но не простым образом, все наши селекторы мы пишем внутри медиа запросов
Медиа-запросы — это инструменты, которые помогают веб-сайту подстраиваться под разные устройства. С их помощью можно изменять внешний вид страницы в зависимости от характеристик устройства: ширины экрана, его высоты, плотности пикселей и других параметров.
Проще говоря, медиа-запрос — это условие, которое проверяет, подходит ли устройство под заданные параметры. Если условие выполнено, применяются определённые стили. Если нет — стили не используются. Это позволяет задать разные правила для разных размеров экранов, например: для экранов до 320 px, от 320 до 720 px, от 720 до 1024 px и выше.
На самом деле можно подставлять любые цифры и они будут работать на выбранных экранах.
Также стоит следовать нескольким правилам:
Но не простым образом, все наши селекторы мы пишем внутри медиа запросов
Медиа-запросы — это инструменты, которые помогают веб-сайту подстраиваться под разные устройства. С их помощью можно изменять внешний вид страницы в зависимости от характеристик устройства: ширины экрана, его высоты, плотности пикселей и других параметров.
Проще говоря, медиа-запрос — это условие, которое проверяет, подходит ли устройство под заданные параметры. Если условие выполнено, применяются определённые стили. Если нет — стили не используются. Это позволяет задать разные правила для разных размеров экранов, например: для экранов до 320 px, от 320 до 720 px, от 720 до 1024 px и выше.
На самом деле можно подставлять любые цифры и они будут работать на выбранных экранах.
Также стоит следовать нескольким правилам:
- Медиа запросы устанавливайте в самом низу CSS кода. Дело в том, что CSS применяется по-очередно. Поэтому если вы для элемента сначала вписали медиа запрос, а потом вставили обычный CSS, то медиа запрос не применится.
- Медиа запросы зачастую могут не срабатывать, особенно на первых порах. Что следует применить? Переделайте селектор, возможно стоит обратится по атрибуту, или через родителя, либо нескольких родителей, а возможно стоит вообще достучаться через псевдоклассы :nth-child() например
Вот список стандартных медиа запросов, вы можете использовать их, а можете также использовать кастомные варианты описанные на странице CSS Свойства
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}
Они созданы для каждого экрана. Что они обозначают?
@media screen and - мы собираемся применить запрос к экрану
(max-width: 320px) - с максимальной шириной 320 пикселей, мы можем поставить любое значение вместо 320
Порой разработчики тильды используют совершенно любые, и 1200 и 1159 и другие не стандартные вариации.
В том числе мы можем ограничить не только максимальную ширину, но и минимальную. Много ли от этого смысла? Понять это мы сможем исключительно на практике, когда у нас не сработает 1 медиа запрос и придется придумывать что-то замудренное.
Вот пример ограниченного с двух сторон медиа запроса:
@media screen and (min-width: 320px) and (max-width: 768px) {
}
@media screen and - как обычно говорит о том, что мы собираемся применить медиа запрос к экрану
(min-width: 320px) - с минимальной шириной 320 пикселей
and (max-width: 768px) - и максимальной шириной 768 пикселей
Такое возможно, когда меньше чем у 320 пикселей экрана - все ок
Но между 320 и 768 все не ок! Тогда и получается что нужно ограничить с двух сторон.
А теперь давайте рассмотрим как на практике выглядит синтаксис с медиа запросом
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}
Они созданы для каждого экрана. Что они обозначают?
@media screen and - мы собираемся применить запрос к экрану
(max-width: 320px) - с максимальной шириной 320 пикселей, мы можем поставить любое значение вместо 320
Порой разработчики тильды используют совершенно любые, и 1200 и 1159 и другие не стандартные вариации.
В том числе мы можем ограничить не только максимальную ширину, но и минимальную. Много ли от этого смысла? Понять это мы сможем исключительно на практике, когда у нас не сработает 1 медиа запрос и придется придумывать что-то замудренное.
Вот пример ограниченного с двух сторон медиа запроса:
@media screen and (min-width: 320px) and (max-width: 768px) {
}
@media screen and - как обычно говорит о том, что мы собираемся применить медиа запрос к экрану
(min-width: 320px) - с минимальной шириной 320 пикселей
and (max-width: 768px) - и максимальной шириной 768 пикселей
Такое возможно, когда меньше чем у 320 пикселей экрана - все ок
Но между 320 и 768 все не ок! Тогда и получается что нужно ограничить с двух сторон.
А теперь давайте рассмотрим как на практике выглядит синтаксис с медиа запросом
<style>
@media screen and (max-width:320px) {
.tn-atom {
background-color: red !important;
}
}
</style>Понимаете логику? То-есть мы внутрь медиа запроса вписали класс элемента и задали ему свойство.
Стоит понять, что именно так, и только так пишутся медиа запросы. Они всегда поверх селекторов, невозможно внутри селектора вписать медиа запрос.
В целом они оочень чувствительны и могут не сработать, если вы их начинаете переопределять много раз в разных местах или сделаете ошибку в 1 медиа запросе.
Поэтому будьте аккуратны и соблюдайте синтаксис.
Посмотрите на небольшую демонстрацию возможностей медиа запросов
Стоит понять, что именно так, и только так пишутся медиа запросы. Они всегда поверх селекторов, невозможно внутри селектора вписать медиа запрос.
В целом они оочень чувствительны и могут не сработать, если вы их начинаете переопределять много раз в разных местах или сделаете ошибку в 1 медиа запросе.
Поэтому будьте аккуратны и соблюдайте синтаксис.
Посмотрите на небольшую демонстрацию возможностей медиа запросов
Понятное дело, по такому принципу можно добавлять абсолютно любые CSS свойства.
Например бывает такое в тильде, что требуется кастомизировать стандартный блок, чтобы он выглядел иначе на мобилке. Давайте рассмотрим конкретный пример
Например бывает такое в тильде, что требуется кастомизировать стандартный блок, чтобы он выглядел иначе на мобилке. Давайте рассмотрим конкретный пример
Таким образом вы можете использовать медиа запросы в своих проектах. Список CSS свойств будет пополнятся разными вариантами запросов. В том числе медиа запросы под ориентацию телефона (не ширина), высота и прочее.
