Столбцы CSS @Media

avatar
DonP
7 апреля 2018 в 23:59
131
0
0

Я использую 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;
    }
}
Источник
Tan Duong
8 апреля 2018 в 00:14
0

Вы используете неправильную структуру медиа-запроса. Должно быть @media (min-width: @screen) and (max-width: @screen) { ... }

DonP
8 апреля 2018 в 00:32
0

Спасибо. Эта структура была взята с сайта w3schools.com, так как раньше я ею почти не пользовался. Как вы указываете размер экрана, используя предложенную вами структуру?

Tan Duong
8 апреля 2018 в 04:57
0

например: @media (min-width: 350px) and (max-width: 750px) { ... } или @media (min-width: 350px) {....}

DonP
8 апреля 2018 в 06:23
0

Я убрал «только экран и», оставив только медиа (max-width: 415px){ . . . } как было предложено, но по-прежнему без столбцов. По крайней мере, экран только для мультимедиа и (максимальная ширина: 415 пикселей) работали, потому что там были элементы, отличные от столбцов, поэтому должно быть что-то еще, вызывающее проблему. Извините, мне пришлось убрать символы AT, так как они здесь не работают.

DonP
8 апреля 2018 в 07:17
0

Я думаю, что часть проблемы заключалась в том, что я перепутал min и max, поэтому теперь столбцы отсортированы и работают. Вернемся к исходному вопросу, почему теперь он игнорирует стили, установленные по умолчанию .SetColumns { . . . } в пользу настройки класса .SetColumns {} в медиа? У меня сложилось впечатление, что установка двух вызовов класса для класса с заданным именем, но с использованием разных параметров будут добавляться друг к другу.

Tan Duong
8 апреля 2018 в 07:25
0

Можете ли вы обновить свой html? Таким образом, мы можем легко найти решение.

Tan Duong
8 апреля 2018 в 07:38
0

И, пожалуйста, проверьте с (max-width: 1024px. Должно быть (max-width: 1024px). Вам не хватает (

Ответы (0)