Верстка и адаптивность

@nekrokarya · Регистрация: 21.12.2018

Author24 — интернет-сервис помощи студентам

Учусь делать верстку, прошу подсказать, в базовых html и css уже разобралась, иду дальше.
https://tikhomirov.life/ как здесь реализован первый кран в плане адаптивности?
Попыталась повторить, не могу даже разобраться. Есть аналогичный макет, пытаюсь сверстать. в фигме ширина экрана - 900 px, при верстке остается пустая полоска, так как картинка меньше. А нужно чтобы на всех dekstop экранах нормально отображалось, что нужно погуглить, чтобы было как на сайте, который скинула выше?

KingdaKa · 29.01.2022, 09:39

Вы бы лучше элементы своей вёрстки привели

А зависимость размера элементов (шрифтов в частности) от ширины экрана можно сделать по-разному - от ширины вьюпорта (почти ширины экрана браузера) единицами группы vw, вычислять через calc тоже через них, но гибче, через бедиа-запросы. Например:

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
.html, body {
    font-size: 16px;
}
 
.fontik {
    font-size: 5vw;
}

HTML5    
        
    Скопировано
1
<div class="fontik">Я завишу от ширины окна!</div>

Новые блоги и статьи Все статьи Все блоги /
Указатели в Swift: Небезопасные, буферные, необработанные и управляемые указатели mobDevWorks 16.04.2025 Указатели относятся к наиболее сложным и мощным инструментам языка Swift. В своей сути указатель — это переменная, которая хранит адрес участка памяти, где расположены данные, а не сами данные. . . .	Жизненный цикл HTTP-запросов в ASP.NET Core MVC UnmanagedCoder 16.04.2025 Разработка веб-приложений на ASP. NET MVC часто выглядит как простой процесс: получили запрос, обработали его в контроллере, отрендерили представление и отправили ответ пользователю. Однако за этой. . .	Введение в Django: Создаём приложение портфолио py-thonny 16.04.2025 Django – один из самых мощных веб-фреймворков на Python, который позволяет быстро создавать сложные веб-приложения. В отличие от других фреймворков, Django предоставляет богатый набор встроенных. . .	Итераторы в C++: Продвинутые техники использования bytestream 16.04.2025 Итераторы - одна из самых гибких и выразительных концепций в C++, позволяющих абстрагировать обход элементов контейнера от его внутренней реализации. За прошедшие годы они эволюционировали от простых. . .	Обработка естественного языка в Python с помощью spaCy py-thonny 16.04.2025 Обработка естественного языка (Natural Language Processing, NLP) — одна из самых быстрорастущих областей искусственного интеллекта, которая позволяет компьютерам понимать, интерпретировать и. . .
Работа с железом в PHP Laravel с Pinout Jason-Webb 16.04.2025 Граница между программным и аппаратным миром стремительно размывается. Современные веб-приложения уже не ограничиваются цифровым пространством — они активно взаимодействуют с физическими. . .	Возвращаясь к сумматороам и регистрам (всё таки заявку подам в ФИПС, сроки горят уже, поэтому симулятор для апгрейда аппарата чуть подождёт) Hrethgir 16.04.2025 Вообще считаю, что асинхронные логические схемы это путь к энергоэффективности и быстродействию, а значит представляют собой область отдельных архитектур, от схем последовательных. Вообще на. . .	Абстрактные классы в TypeScript run.dev 15.04.2025 Разработка современных веб-приложений требует надежных инструментов для структурирования кода. В этом контексте абстрактные классы стали незаменимым элементом объектно-ориентированного. . .	Хеш-функции std::hash в C++ программировании NullReferenced 15.04.2025 Хеширование — фундаментальная концепция в компьютерных науках, играющая важную роль в эффективной обработке и хранении данных. В C++ функциональность std::hash является неотъемлемой частью. . .	Форматирование строк в Python py-thonny 15.04.2025 Форматирование строк — одна из тех базовых возможностей Python, которые сопровождают разработчика каждый день. Эта задача кажется тривиальной на первый взгляд, но на самом деле представляет собой. . .

@nekrokarya 0 / 0 / 1 Регистрация: 21.12.2018 Сообщений: 18

	Верстка и адаптивность 28.01.2022, 20:58. Показов 295. Ответов 1 Метки css, html 5, html css (Все метки) Учусь делать верстку, прошу подсказать, в базовых html и css уже разобралась, иду дальше. https://tikhomirov.life/ как здесь реализован первый кран в плане адаптивности? Попыталась повторить, не могу даже разобраться. Есть аналогичный макет, пытаюсь сверстать. в фигме ширина экрана - 900 px, при верстке остается пустая полоска, так как картинка меньше. А нужно чтобы на всех dekstop экранах нормально отображалось, что нужно погуглить, чтобы было как на сайте, который скинула выше? 0