Заставьте область просмотра думать, что максимальная ширина составляет 1200 пикселей, когда ширина окна больше - PullRequest
Новая
       9

Заставьте область просмотра думать, что максимальная ширина составляет 1200 пикселей, когда ширина окна больше

0 голосов
/ 27 мая 2018

Я делаю сайт, который в тесте является полностью отзывчивым.Почти все элементы масштабируемы с помощью блоков vw.Он отлично работает, но на ПК (ширина окна> 1200 пикселей) сайт выглядит ужасно.Я хочу сделать контент сайта по центру с решетками по бокам.Я попытался установить ширину тела или максимальную ширину в 1200 пикселей, но единицы измерения vw масштабируются до размера окна.Можно ли установить максимальную ширину для блоков VW?или мне нужно переделать страницу для ПК?Я попытался установить, но это ничего не делает в браузере. Снимок экрана: как выглядит max-width

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

То, как вы делаете это с (VW, VH) форматированием, должно работать.

Вот пример <div>, который полностью реагирует с VW, VH

.div_scroll
    {overflow-y: scroll;
        display: block;
        left: 0px;
        top: 0px;
        position: absolute; 
        border: 3px solid #dddddd; 
        height: 75vh;
        width: 79vw;
        margin: 0px;
        background-color: white;
        transform: translate(0vw, 14vh);}

Вы можете указать минимальное и максимальное значения как

min-width: 10vw; min-height: 10vh; max-width: 10vw; max-height: 10vh;

Число - это% от области просмотра.Допустим, у вас есть <div>, и вы хотите, чтобы он заполнял максимум 80% области просмотра (Область просмотра - это не монитор, а окно). Вы бы сделали это следующим образом: 

max-width: 80vw;
max-height: 80vh;
0 голосов
/ 28 мая 2018

Если вы не хотите использовать адаптивный фреймворк, такой как начальная загрузка, у вас есть два варианта:

Опция 1: медиазапросы

Использование медиазапросов для установки различных наборовстилей для разных диапазонов разрешений.Например, все, что содержится в этом запросе, вступит в силу только в том случае, если ширина области просмотра превышает 1200 пикселей: 

@media only screen and (min-width : 1200px) {
    .container {
        width:5vw;
    }
}

Опция 2: используйте vmin и vmax

AХороший трюк, который мне нравится использовать, - это использовать единицы измерения vmin и vmax.Это в основном позволяет вам использовать пропорции экрана для правильного масштабирования.Например: 

.container {
    height:100vmin;
}

Высота этого элемента будет равна той, которая меньше (ширина или высота области просмотра) наименьшая.Поэтому его высота всегда будет вписываться в окно просмотра.

...