Вопрос Как сделать автоподгон интерфейса (CEF) под разные разрешения экранов?

[DANICH70]

Здравствуйте, я хочу сделать, чтобы мой интерфейс автоматически подгонялся под размер экрана ГТА. Но не получается. Доказательства: (http://imgur.com/a/15Z1k92) Код:

HTML:

<link href="style.css" rel="stylesheet" type="text/css">
<img src="https://i.imgur.com/MMtlA0d.png" width="auto" height="auto" />

CSS:

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}


.contain {
  object-fit: cover;
}

 

[semtrip]

Пиши медиа запросы под известные разрешения экранов. Далее как один из вариантов адаптации интерфейса, делать это через зум, есть некоторые проблемы с ним. Ломает некоторые системы, допустим input range.

CSS:

@Media screen and (max-width: 900px) {
  div {
    zoom: .5;
  }
}
@Media screen and (max-width: 1280px) {
  div {
    zoom: .8;
  }
}

И так далее.

Либо полностью адаптировать все размеры под определенное разрешение.

CSS:

@Media screen and (max-width: 900px) {
  div {
    width: 850px;
    height: 700px;
  }
}
@Media screen and (max-width: 1280px) {
  div {
    width: 1200px;
    height: 900px;
  }
}

 

[Sinage]

Используйте в качестве основных едениц измерения не пиксели (px) а vw или vh или всё сразу, а под исключительные разрешения типа (800x600) используйте запросы как показал человек выше.
Подробнее про vw и vh ищите в интернете, использовать его можно на всех элементах

 

[DANICH70]

semtrip написал(а):

Пиши медиа запросы под известные разрешения экранов. Далее как один из вариантов адаптации интерфейса, делать это через зум, есть некоторые проблемы с ним. Ломает некоторые системы, допустим input range.

CSS:

@Media screen and (max-width: 900px) {
  div {
    zoom: .5;
  }
}
@Media screen and (max-width: 1280px) {
  div {
    zoom: .8;
  }
}

И так далее.

Либо полностью адаптировать все размеры под определенное разрешение.

CSS:

@Media screen and (max-width: 900px) {
  div {
    width: 850px;
    height: 700px;
  }
}
@Media screen and (max-width: 1280px) {
  div {
    width: 1200px;
    height: 900px;
  }
}

Нажмите для раскрытия...

А какое должно быть разрешение самого изображения с интерфейсом? Самое минимальное или максимальное?

 

[semtrip]

Я делаю это так

CSS:

@media (max-width: 1000px) and (min-width: 600px) {
    #box {
        zoom: 41.6%;
    }
}

@media (max-width: 1100px) and (min-width: 1001px) {
    #box {
        zoom: 53.3%;
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    #box {
        zoom: 66.6%;
    }
}

@media (max-width: 1400px) and (min-width: 1281px) {
    #box {
        zoom: 71.1%;
    }
}

@media (max-width: 1800px) and (min-width: 1401px) {
    #box {
        zoom: 83.3%;
    }
}

@media (max-width: 2000px) and (min-width: 1800px) {
    #box {
        zoom: 100%;
    }
}

@media (max-width: 3000px) and (min-width: 2000px) {
    #box {
        zoom: 100%;
    }
}

 

[DANICH70]

semtrip написал(а):

Я делаю это так

CSS:

@media (max-width: 1000px) and (min-width: 600px) {
    #box {
        zoom: 41.6%;
    }
}

@media (max-width: 1100px) and (min-width: 1001px) {
    #box {
        zoom: 53.3%;
    }
}

@media (max-width: 1280px) and (min-width: 1101px) {
    #box {
        zoom: 66.6%;
    }
}

@media (max-width: 1400px) and (min-width: 1281px) {
    #box {
        zoom: 71.1%;
    }
}

@media (max-width: 1800px) and (min-width: 1401px) {
    #box {
        zoom: 83.3%;
    }
}

@media (max-width: 2000px) and (min-width: 1800px) {
    #box {
        zoom: 100%;
    }
}

@media (max-width: 3000px) and (min-width: 2000px) {
    #box {
        zoom: 100%;
    }
}

Нажмите для раскрытия...

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

 

[HIGH420]

DANICH70 написал(а):

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

Нажмите для раскрытия...

Для cef интерфейсов вполне подходит vh или vw вместо px и все