Попутный ветер приоритет css
Я столкнулся с проблемой настройки ширины div для разных экранов. Я сделал класс .vBox в tailwind.css
.vBox{
width: 360px;
min-height : 200px;
}
И использовал его в div
<div className = "h-48 md:vBox w-full">
А вот ширина всегда полная, по w-full, для всех медиаэкранов. я даже пытался
<div className = "h-48 w-full md:vBox">
Но тот же результат. Если я удалю w-full, то ширина будет соответствовать vBox, но я хочу, чтобы ширина класса w-full была на мобильных экранах.
@BozlurRahman, так как сделать vBox отзывчивым? в настоящее время он занимает полную ширину для всех экранов
Вы сделали .vBox как утилиту или просто поместили .vBox в свой лист css?
Ответы 3
Если вы хотите установить различную ширину пространства для каждого удаленного устройства, вы можете сделать это, захватив ширину экрана устройства с помощью функции @media() css. я сделала для вас пример в https://play.tailwindcss.com/gEgbhOvzH8?size=514x720&file=css
или вы можете проверить фрагмент кода, показанный ниже
.vBox{
min-height : 200px;
background: red;
}
@media (min-width:480px) {
.vBox { width: 400px }
}
@media (min-width:640px) {
.vBox { width: 600px }
}
@media (min-width:768px) {
.vBox { width: 700px }
}
@media (min-width:1024px) {
.vBox { width: 1000px }
}
@media (min-width:1280px) {
.vBox { width: 1200px }
}
@media (min-width:1536px) {
.vBox { width: 1500px }
}<link href = "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel = "stylesheet">
<div class = "h-48 vBox w-full">Спасибо .. но это старый CSS, почему .. мы не можем получить выгоду от использования попутного ветра
Чтобы сделать ваш пользовательский класс .vBox отзывчивым, вы можете определить его следующим образом:
@variants responsive {
.vBox {
width: 360px;
min-height : 200px;
}
}
Это позволит подобрать ваш класс по префиксам точек останова, например md:vBox в вашем примере.
Ознакомьтесь с документацией по созданию адаптивных вариантов для получения более подробной информации.
Вы можете использовать w-[100%] вместо w-full, это поможет.
Это не дает ответа на вопрос. Когда у вас будет достаточная репутация , вы сможете комментировать любой пост ; вместо этого давайте ответы, не требующие пояснений от спрашивающего . - Из отзыва
имя класса "h-48 md:vBox w-full" и "h-48 w-full md:vBox" таким же образом. поэтому вам нужно подумать о добавлении нового класса, определенного в CSS попутного ветра, который работает в адаптивном режиме. во-первых, вы не должны определять пространственную ширину для div, чтобы получить полную ширину с отзывчивым. div полной ширины никогда не будет работать, если вы определите для него любую индивидуальную ширину, например 360 пикселей.