Изменение размера элементов div с окном изменения размера по умолчаниюCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Изменение размера элементов div с окном изменения размера по умолчанию

Сообщение Anonymous »

Я видел похожую тему с ответами о размере в % или vh, но она немного другая.
У меня есть набор разных графиков с размерами 900x600 по умолчанию, используя этот CSS:

Код: Выделить всё

.chartbox {
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
justify-content: space-around;
}
.chart {
background-color: #f1f1f1;
width: 900px;
height: 600px;
margin: 10px;
position: center;
}
как это выглядит
И я хочу, чтобы они автоматически меняли размер при изменении размера окна (или при наличии маленького экрана)
Я используя диаграммы из ECharts с кодом js, например:

Код: Выделить всё

var myChart = echarts.init(document.getElementById('main'));

var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};

myChart.setOption(option)
Мой HTML:

Код: Выделить всё




ECharts
[*]



















Я пытался использовать % и vh для высоты и ширины .chart, но они конфликтуют с размером по умолчанию.
Я пытался использовать максимальную ширину и максимальную высоту без ширины и высота, но диаграммы не отображаются (мб, это функция ECharts).
Я ожидаю следующего:
  • если 3 диаграммы 900x600 могут поместиться на экране затем разместите их
  • иначе, если 3 диаграммы 600x400 могут поместиться на экране, тогда разместите их.
  • иначе, если 2 диаграммы 900x600 могут поместиться на экране, разместите их< /li>
    иначе, если 2 диаграммы 600x400 могут поместиться на экране, разместите их.
  • иначе, если 1 диаграмма 900x600 может поместиться на экране, разместите ее.
  • иначе, если 1 диаграмма 900x600 может поместиться на экране, разместите ее.
  • иначе, если 2 диаграммы 600x400 могут поместиться на экране, разместите их
  • иначе, если 1 диаграмма 900x600 может поместиться на экране, разместите ее
  • иначе, если 1 диаграмма размером 600x400 может поместиться на экране, поместите ее
  • иначе измените размер, насколько это возможно


Подробнее здесь: https://stackoverflow.com/questions/782 ... ing-window
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»