Задать вопрос
SkiperX

Алекс Глебов

Ответы пользователя по тегу Media queries

  • Можно ли сделать так, чтобы элемент dom растягивался на всю ширину grid родителя, не зависимо от количества колонок?

    SkiperX
    @SkiperX Куратор тега CSS
    в body 2 элемента

    5ff55f7e7e5da751415503.jpeg

    делаем основную сетку

    5ff55f0b6604f624400735.jpeg

    помещаем блоки в центральную колонку

    5ff55f2f4fb8f342196871.jpeg

    делаем микросетку в блоках

    5ff55f3cb103b162010587.jpeg


    Структуру вижу так

    <div class="header"></div>
    <div class="content">
        <div class="row">
            <div class="col-left">
                <div class="aside-left"></div>
            </div>
            <div class="col-main">
                <div class="main">
                    <div class="filter">
                        <div class="row">
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                            <div class="col-3">
                                <div class="input"></div>
                            </div>
                        </div>
                        <div class="btn"></div>
                    </div>
                    <div class="news-line"></div>
                    <div class="news">
                        <div class="row">
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                        </div>
                    </div>
                    <div class="news-line"></div>
                    <div class="news">
                        <div class="row">
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                            <div class="col-4">
                                <div class="news-card"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-right">
                <div class="aside-right"></div>
            </div>
        </div>
    </div>

    Ответ написан
    1 комментарий
    1 комментарий

  • Вопрос по медиазапросам?

    SkiperX
    @SkiperX Куратор тега CSS
    Если на ноуте с высотой экрана 620px что-то не входит в экран, приходится делать адаптив по высоте.

    С плагином fullpage приходится
    https://codepen.io/SquishyAndroid/pen/XjRPVV

    И на сайтах с горизонтальным скролом
    https://gogolevsky12.art3d.ru/
    Ответ написан
    1 комментарий
    1 комментарий

  • CSS Медиа запросы, зачем only?

    SkiperX
    @SkiperX Куратор тега CSS
    1-3)@media (max-width: 500px) {} - все
    4)
    Устройство в 320 рх подходит под все три запроса?

    да
    как CSS разбирает из этих запросов что применять?

    применится правило, которое ниже в коде. Как если бы не было никакого медиа, а был обычный css.
    4)
    Или нужно ставить медиа стили строго в порядке убывания разрешения, чтобы самый нижний в коде был с наименьшим разрешением?

    Если верстаешь сначала для монитора, потом для мобилок адаптируешь, то с наименьшим будет снизу, т.к ему надо перекрывать правила больших расрешений.
    Если mobile first, то стили для телефона без медиа, а под большие разрешения ниже пишешь медиа запросы.
    5) если стиль не меняется никогда (цвет например), медиазапрос для него не нужен.
    6) Не удобно искать стили в разных местах.
    хорошо, если один класс встречается 1 раз в css. Так лучше для поддержки кода
    sass позволяет писать медиа внутри правила
    .elem {
    color: red;
    @media () {
        color: red;
     }
}

    7) это вопрос удобства. Главное не смешивай 2 этих случая.
    Ответ написан
    Комментировать
    Комментировать