Просмотр темы
 Пример нативной верстки CSS
|
|
| Redfield |
Опубликовано 08.08.2024 06:08
|
 Опытный пользователь  Сообщений: 323 Зарегистрирован: 16.01.2011 22:12 |
Копирую свой пример сюда. Может будет полезен: Некоторые люди спрашивали меня в чем разница нативной верстки от обычной. Показываю конкретный пример! Все сайты почти построены с фиксированными единицами (например в px пикселях), и ограничены контейнером по максимальной ширине. Такой сайт на больших экранах как минимум будет утопать в высоких разрешениях.Чтобы решить эту проблему вы можете строить сайт в специальных единицах, например vw.Чтобы не писать точки разрыва для адаптива вы можете использовать следующий код как пример:  Кодwidth: max(var(--200px), min(200px));где var(--200px) = конкретному значению vw с расчетом вычисления от какой-нибудь конкретной точки ширина экрана. В качестве примера для сравнения приведу ниже код: Код<!DOCTYPE HTML>Чтобы сравнить откройте окно вначале в 1440px, разницу смотрите выше 1440px. Чтобы вы не копировали код, специально для вас загрузил страничку: https://gameraide.../love.html Более продвинутые примеры с грязным кодом для типографии что-то делал давно: https://gameraide...INONE.html https://gameraide...ONE-2.html Возможно для кого-то будет открытием. Пользуйтесь! Сайт про видеоигры https://gameraide... (в разработке) ^
|
 x1
|
|
|
|
|
| pvam |
Опубликовано 08.08.2024 12:08
|
 Пользователь  Сообщений: 170 Зарегистрирован: 18.05.2014 12:23 |
Да. На примере видно результат. Отлично для разработки современных сайтов. Объединено 09.08.2024 00:50: При изменении размера окна браузера (десктоп) на странице снановится понятен смысл. Изменил(а) pvam, 09.08.2024 00:50 на PHP-Fusion c 2008 года
|
|
|
|
| Redfield |
Опубликовано 19.08.2024 16:38
|
|
Опытный пользователь Сообщений: 323 Зарегистрирован: 16.01.2011 22:12 |
Да. При помощи данного примера можно придумывать свои варианты и комбинированные решения. ЕСТЬ альтернативное решение, например использовать js + css, zoom или transform, но с таким вариантом будет за счет масштабирования, а не натива. Сайт про видеоигры https://gameraide... (в разработке) ^
|
|
|
|
| Поделиться этой темой | |
| Социальные закладки: |
|
| URL: | |
| BBcode: | |
| HTML: |
| Перейти на форум: |
