Создание адаптивного апплета GeogebraCSS

Разбираемся в CSS
Ответить
Anonymous
 Создание адаптивного апплета Geogebra

Сообщение Anonymous »


Мне нужно, чтобы апплет GeoGebra реагировал на изменение размера окна. У меня есть следующие HTML и CSS

let params = { "Имя приложения": "", «showToolBar»: ложь, «showAlgebraInput»: правда, «showMenuBar»: ложь, "id":"графика", "scaleContainerClass":"graphContainer", «enableCAS»: правда }; пусть апплет = новый GGBApplet (параметры, правда); applet.setHTML5Codebase('assets/geogebra/HTML5/5.0/web3d/'); window.addEventListener("load", function() { applet.inject('ggb-element'); }); //Пытаемся использовать recalculateEnvironments функция windowResized() { график.recalculateEnvironments() } window.addEventListener("resize", windowResized); html { размер шрифта: $размер шрифта; семейство шрифтов: $семейство шрифтов; фон: $background-color; цвет: $font-color; } HTML, тело { ширина: 100vw; высота: 100вх; маржа: 0; заполнение: 0; переполнение: скрыто; } тело{ цвет фона: #FAF9F6; } //Адаптивный размер шрифта @media (минимальная ширина: 1 пиксель){ html{ размер шрифта: 0,4рем; } } @media (минимальная ширина: 300 пикселей){ html{ размер шрифта: 0,5рем; } } @media (минимальная ширина: 689 пикселей){ html{ размер шрифта: 0,8рем; } } .корень { дисплей: гибкий; гибкий поток: столбец; высота: 100%; } .ряд { гибкий: 1 1 авто; } .footer { дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; гибкость: 0 1 5%; } .questionBox{ // максимальная высота: 35%; // переполнение-y: прокрутка; положение: относительное; z-индекс: 100; //Некоторое число больше, чем наибольшее значение z графика гибкий: 0 1 авто; ширина: 100%; заполнение: 1% 0 1% 0; цвет фона: #ffff; box-shadow: rgba(70,161,255,0.5) 0 15px 30px -5px; дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: центр; размер шрифта: 2rem; выравнивание текста: по центру; п{ заполнение: 0; отступ слева: 10 пикселей; отступ справа: 10 пикселей; маржа: 0;
Отправить
Выглядит правильно, но если вы измените размер окна, оно останется в исходном размере. Если вы перезагрузите страницу, она будет выглядеть правильно в новом размере.

Я просматривал https://wiki.geogebra.org/en/Reference: ... a_Apps_API и нашел несколько функций, которые, как мне казалось, могли бы работать как recalculateEnvironments(), но, похоже, они ничего не сделали.

Обновить Использование graphing.setSize(document.getElementById('graph').clientWidth, document.getElementById('graph').clientHeight); Вроде работает, но через некоторое время ломается.
Ответить

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

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

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

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

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