CSS ориентация и размер в одном документе

Question

Я помогаю стилизовать приложение, которое создается в Alpha Anywhere. Цель состоит в том, чтобы использовать тег @media для включения различных стилей для размещения небольших телефонов в портретной ориентации, больших телефонов в портретной ориентации, телефонов в альбомной ориентации и планшетов.

Я думал использовать @media screen and... для определения диапазонов размеров и иметь в скобках код стиля, определяющий соответствующий размер контейнера и шрифта, чтобы сделать каждый формат идеальным для устройства, на котором он будет отображаться.

Поскольку я работаю в Alpha Anywhere, есть вкладка для CSS. Мне нужно поместить весь CSS в это место, чтобы я не мог использовать разные CSS-файлы для каждого стиля. Я надеялся заключить в скобки код для одного стиля в одном диапазоне медиа и код для другого стиля в другом и так далее. Могу ли я иметь несколько линий / регионов, определенных их @media диапазонами?

@media screen and (min-width: 150px) and (max-width: 350px) and (orientation: portrait) {

/* Style Code for Small Phone Portrait Orientation Here */

}


@media screen and (min-width: 351px) and (max-width: 560px) and (orientation: portrait) {

/* Style Code for Large Phone Portrait Orientation Here */

}


@media screen and (max-width: 415px) and (orientation:landscape) {

/* Style Code for Phone Landscape Orientation Here */

}


@media screen and (min-width: 561px) {

/* Style Code for Tablet Here */

}

Когда я организовываю свой код стиля таким образом, он, похоже, учитывает только стиль из последнего из 4 наборов кода (стиль планшета). Есть ли способ для меня стилизовать эти разные размеры / ориентации на одной странице?

Answer 1

Начните с мобильного телефона и напишите ваши стили по умолчанию. Вносите небольшие изменения в следующую точку останова, сохраняя ее простой и переопределяя только то, что необходимо. Медиа-запросы для ориентации только усложнят, поэтому используйте только min-width.

    /* Styles for default  */


    @media screen and (min-width: 480px) {
        /* Add styles for next size up */
    }


    @media screen and (min-width: 720px) {

        /* Add styles for next size up */

    }


    @media screen and (min-width: 960px) {

        /* Add styles for next size up */

    }