Я использую CSS для текстовых колонок, но решил динамически изменять количество колонок в зависимости от размера экрана с помощью CSS @media.
Итак:
.SetColumns {
background: inherit;
padding: 0 20px 20px 20px;
-moz-column-count: 2;
-moz-column-gap: 40px;
-moz-column-rule: 3px double #666;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 3px double #666;
column-count: 2;
column-gap: 40px;
column-rule: 3px double #666;
}
стало таким (количество столбцов удалено):
.SetColumns {
background: inherit;
padding: 0 20px 20px 20px;
-moz-column-gap: 40px;
-moz-column-rule: 3px double #666;
-webkit-column-gap: 40px;
-webkit-column-rule: 3px double #666;
column-gap: 40px;
column-rule: 3px double #666;
}
затем я переместил количество столбцов в другой включенный файл css с помощью:
@media only screen and (max-width: 415px){
.stdv {display: none;} /* Site menu */
.LogoBar {display: none;}
.TitleBar {height: 20px;}
.PageContent {margin: -40px 0 150px 0;}
.Logout {padding-left: 0;
margin-left: 0;}
div.UpdateDate {display: none;}
.SetColumns {-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (max-width: 1024px and (min-width: 416px){
.SetColumns {-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width: 1919px) and (min-width: 1024px){
.SetColumns {-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}
@media only screen and (min-width: 1920px){
.SetColumns {-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
но получить только один столбец независимо от размера браузера. Есть ли в CSS какое-то правило, согласно которому все теги столбцов должны повторяться, чтобы оно работало, или есть какая-то другая очевидная ошибка, которую я пропустил?
ОБНОВЛЕНИЕ. Чтобы столбцы заработали, мне пришлось повторять теги столбцов в каждом @media, чего я старался не делать. Так что избавиться от этого и поместить его в каждый из тегов @media — это не то, что я пытался сделать.
.SetColumns {
background: inherit;
padding: 0 20px 20px 20px;
-moz-column-gap: 40px;
-moz-column-rule: 3px double #666;
-webkit-column-gap: 40px;
-webkit-column-rule: 3px double #666;
column-gap: 40px;
column-rule: 3px double #666;
}
Заменяем его этим (первые два не имеют столбцов, поэтому там ничего не нужно)
@media (max-width: 600px){
.stdv {display: none;} /* Site menu */
.LogoBar {display: none;}
.TitleBar {height: 20px;}
.PageContent {margin: -40px 0 150px 0;}
.Logout {padding-left: 0;
margin-left: 0;}
div.UpdateDate {display: none;}
.SetColumns {
background: inherit;
padding: 0 20px 20px 20px;
}
}
@media (min-width: 600px){
.SetColumns {
background: inherit;
padding: 0 20px 20px 20px;
}
}
@media (min-width: 800px){
.SetColumns {-moz-column-count: 1;
background: inherit;
padding: 0 20px 20px 20px;
-moz-column-count: 2;
-moz-column-gap: 40px;
-moz-column-rule: 3px double #666;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
-webkit-column-rule: 3px double #666;
column-count: 2;
column-gap: 40px;
column-rule: 3px double #666;
}
}
@media (min-width: 1024px){
.SetColumns {
-moz-column-count: 1;
background: inherit;
padding: 0 20px 20px 20px;
-moz-column-count: 3;
-moz-column-gap: 40px;
-moz-column-rule: 3px double #666;
-webkit-column-count: 3;
-webkit-column-gap: 40px;
-webkit-column-rule: 3px double #666;
column-count: 3;
column-gap: 40px;
column-rule: 3px double #666;
}
}
@media (min-width: 1500px){
.SetColumns {-moz-column-count: 1;
background: inherit;
padding: 0 20px 20px 20px;
-moz-column-count: 4;
-moz-column-gap: 40px;
-moz-column-rule: 3px double #666;
-webkit-column-count: 4;
-webkit-column-gap: 40px;
-webkit-column-rule: 3px double #666;
column-count: 4;
column-gap: 40px;
column-rule: 3px double #666;
}
}
Вы используете неправильную структуру медиа-запроса. Должно быть
@media (min-width: @screen) and (max-width: @screen) { ... }Спасибо. Эта структура была взята с сайта w3schools.com, так как раньше я ею почти не пользовался. Как вы указываете размер экрана, используя предложенную вами структуру?
например:
@media (min-width: 350px) and (max-width: 750px) { ... }или@media (min-width: 350px) {....}Я убрал «только экран и», оставив только медиа (max-width: 415px){ . . . } как было предложено, но по-прежнему без столбцов. По крайней мере, экран только для мультимедиа и (максимальная ширина: 415 пикселей) работали, потому что там были элементы, отличные от столбцов, поэтому должно быть что-то еще, вызывающее проблему. Извините, мне пришлось убрать символы AT, так как они здесь не работают.
Я думаю, что часть проблемы заключалась в том, что я перепутал min и max, поэтому теперь столбцы отсортированы и работают. Вернемся к исходному вопросу, почему теперь он игнорирует стили, установленные по умолчанию .SetColumns { . . . } в пользу настройки класса .SetColumns {} в медиа? У меня сложилось впечатление, что установка двух вызовов класса для класса с заданным именем, но с использованием разных параметров будут добавляться друг к другу.
Можете ли вы обновить свой html? Таким образом, мы можем легко найти решение.
И, пожалуйста, проверьте с
(max-width: 1024px. Должно быть(max-width: 1024px). Вам не хватает(