Мобільна сторінка з адаптивним дизайном

Ця сторінка демонструє реалізацію мобільного інтерфейсу з використанням чистих HTML5 та CSS3, без JavaScript.

./ex/output.htmlPandoc export MathML CLI

/j.html NEW HOME

Рівняння Д.Бернуллі для в'язкої рідини Two Pipes ../jhb1_r006r1.html

en/jh_B_1_14c.html Determine the pressure

ex/jsf12d.html MathML in jsf11.html

./ex/jm.htmlNo Js Content EX

./ex/jsf13.htmlJob 13 (pa+h1)

./ex/jsf14.htmlJob 13 (p_vac+h1)

./ex/jgrLineCoordinate.htmlReference of coordinate Job 13 (pa+h1)

ex/jmm.html Мобільна сторінка з адаптивним дизайном List Resources

https://www.k123.org.ua/ex/jgrLinePattern.html

MathML3/chapter2.html

MathML3/chapter3.html

https://danielscully.uk/projects/mathml-guide/browsertest.php

https://www.k123.org.ua/ex/jgrLinePattern.html

https://www.k123.org.ua/ex/jsp1c.html

https://www.k123.org.ua/ex/jdRe.html

https://www.k123.org.ua/ex/jgpt1a.html

https://www.k123.org.ua/ex/jdsSVGfontRot4.html

https://www.k123.org.ua/ex/jmm2.html

https://www.k123.org.ua/ex/jex00001a.html

https://www.k123.org.ua/ex/jmm3.html

https://www.k123.org.ua/ex/jmm5.html

https://www.k123.org.ua/ex/jmm6.htmlМатематичні формули в форматі SVG

https://www.k123.org.ua/ex/jmg.html(async defer Google script)

https://www.k123.org.ua/ex/jgrMathSVG3.htmlMathJax Mobile First SVG

https://www.k123.org.ua/ex/j1.htmlBlack-White 4 Regims Buttons

https://www.k123.org.ua/ex/jSVGwv.htmlCSS position of SVG examples

https://www.k123.org.ua/ex/

Обмеження та особливості реалізації

Введені технічні обмеження:

Чистий HTML5/CSS3 без JavaScript
Mobile First підхід до розробки
Підтримка всіма основними браузерами
Абсолютна мінімізація обсягу коду
Використання тільки системних шрифтів

Структурні обмеження:

Два не фіксовані меню (верхнє та нижнє)
По 5 текстових кнопок у кожному меню
Відсутність графічних елементів у кнопках
Чорно-срібно-біла кольорова схема
Семантична розмітка з використанням article

Особливості реалізації коду

Мінімізація CSS:

Використано тільки 65 рядків CSS коду
Відсутність зайвих декоративних стилів
Мінімальна кількість CSS-правил
Використання каскаду для успадкування
Відсутність складних селекторів

Адаптивність:

3 брейкпоінти (mobile, tablet, desktop)
Прогресивне збільшення шрифту
Гнучкі контейнери з max-width
Відносні одиниці виміру (rem, %)
Flexbox для компонування

Оптимізація:

Один CSS-файл без зовнішніх залежностей
Мінімальна кількість HTTP-запитів
Оптимальні розміри для дотику (кнопки)
Відсутність складних обчислень у CSS
Проста типографіка без завантаження шрифтів

Додатковий демонстраційний контент

Цей блок демонструє прокрутку сторінки разом з меню. Обидві навігаційні панелі не фіксовані та переміщуються разом з контентом.

Використання семантичних тегів article забезпечує правильну структуру документа та покращує доступність для допоміжних технологій.

Підзаголовок третього рівня

Текст для демонстрації вкладеності семантичних елементів. Кожен article є незалежним блоком контенту.