Tailwind – React – лучший способ структурировать HTML в зависимости от размеров экрана
Как лучше всего обработать элемент, который должен оставаться в определенном месте, если ширина экрана > X, и оставаться в другом месте, если ширина экрана < X?
Пример: https://jsfiddle.net/ovujgsz0/7/
Я хочу, чтобы левый столбец располагался под правым столбцом, если размер экрана меньше 1024 пикселей.
Один из способов, который я вижу, — это объявить div#leftColumn в обоих местах (начальном месте и рядом с div#rightColumn), а затем просто использовать классы попутного ветра для его отображения в зависимости от размера экрана. Но это кажется неправильным.
Что, если у меня есть более крупный и сложный компонент? Я чувствую, что это решение создаст проблемы с отображением большего количества контента, чем необходимо.
Ответы 3
Вы правы, есть способ лучше :-)
Чтобы решить эту проблему, вы можете использовать запрос @media screen. Используя @media screen, вы можете указать максимальную ширину, при которой будет применяться указанный блок CSS. В вашем случае вам следует изменить атрибут display родительского/контейнерного div.
- Если экран шире 1024 пикселей,
display: flex,flex-direction: rowзаставит ваши элементы отображаться рядом друг с другом. - Если экран уже 1024 пикселей,
display:gridи отобразите три дочерних элемента div в сетке, как вы указали (leftColumnнижеrightColumn).
Вот пример использования кода из вашей скрипки:
.container {
display: flex;
flex-direction: row;
}
#mainContent, #leftColumn, #rightColumn {
width: 200px;
height: 200px;
}
@media screen and (max-width: 1024px) {
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0;
grid-row-gap: 0;
}
#mainContent { grid-area: 1 / 1 / 3 / 2; }
#rightColumn { grid-area: 1 / 2 / 2 / 3; }
#leftColumn { grid-area: 2 / 2 / 3 / 3; }
}
В этом решении макет сетки применяется только в том случае, если экран уже 1024 пикселей.
Вы можете использовать https://cssgrid-generator.netlify.app/, чтобы попробовать разные сетки.
Этого можно добиться с помощью сетки и обертывания боковых панелей внутри контейнера, имеющего свойство display: contents;.
Вот пример с использованием Tailwind.
Использование приемов макетирования CSS в качестве альтернативы дублированию рендеринга элементов обычно является хорошей идеей. Но переместить элемент влево или вправо непросто, особенно если вы хотите, чтобы эти элементы оставались выровненными друг по другу после сдвига.
В конце концов я нашел способ заставить left column по-прежнему выравниваться с right column после перемещения его вправо, но недостатком является то, что он выходит за рамки потока документов и требует предварительного расчета ширины элемента left column. Однако из-за расположения в виде сетки нетрудно предварительно рассчитать ширину элемента. В целом это не очень элегантно, но работает:
<!-- grid columns: 1:2:1 -->
<article class = "grid relative m-8 grid-cols-3 text-center text-white lg:grid-cols-4">
<section class = "col-span-2 h-[200rem] bg-green-500 lg:col-start-2">MAIN CONTENT</section>
<div>
<aside class = "h-[20rem] bg-blue-500">RIGHT COLUMN</aside>
<!-- width: 1/(1+2+1) -->
<aside class = "h-[70rem] bg-red-500 lg:absolute lg:left-0 lg:top-0 lg:w-1/4">LEFT COLUMN</aside>
</div>
</article>
ДЕМО при игре попутного ветра
Стоит отметить, что трюки – это всего лишь трюки. CSS не может достичь всего в макете. Если возникает более сложное изменение макета, которое CSS не может легко реализовать, его двойная отрисовка может оказаться более простым и гибким подходом.