Frontend | Вопросы собесов 1346

Forwarded from easyoffer

⏳ Осталось всего 14 дней до завершения краудфандинга

Сейчас самое подходящее время подключиться, если вы ждали или откладывали:

Все, кто поддержат проект сейчас, до релиза, получат:
🚀 PRO-доступ на 1 год по цене месячной подписки
➕ Бета-доступ к EasyOffer 2.0 (конец мая)

👉 Поддержать: https://planeta.ru/campaigns/easyoffer

2.8K views14:18

Frontend | Вопросы собесов

🤔 Какие бывают state managers в React?

В React существует несколько способов управления состоянием:
- Локальное состояние: useState, useReducer — работают внутри одного компонента.
- Context API — позволяет делиться данными между компонентами без пропсов.
- Redux — централизованное хранилище с actions и reducers, подходит для крупных приложений.
- Zustand — минималистичный менеджер, позволяет создавать глобальное состояние с простым API.
- Recoil — атомарная модель состояния, поддерживает асинхронность.
- MobX — реактивный подход с автообновлениями при изменении данных.
- Jotai, XState, React Query — решают разные задачи: управление атомами, конечными автоматами, загрузкой данных.
Выбор зависит от масштаба проекта и предпочтений команды.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.5K views16:10

Frontend | Вопросы собесов

🤔

Как защитить Cookie от JavaScript?

Если cookie содержит чувствительную информацию (например, auth_token), важно защитить его от доступа через JavaScript. Иначе злоумышленник может украсть его через XSS-атаку (Cross-Site Scripting).

🟠

Используем флаг `HttpOnly` (основная защита)
HttpOnly делает cookie недоступным для JavaScript (document.cookie).

Set-Cookie: auth_token=abc123; HttpOnly; Secure; SameSite=Strict

🟠

Используем `Secure`, чтобы cookie передавались только по HTTPS
Флаг Secure запрещает передачу cookie через HTTP, только HTTPS.

Set-Cookie: auth_token=abc123; Secure

🟠

Используем `SameSite`, чтобы защититься от CSRF-атак
SameSite=Strict или SameSite=Lax защищает от подделки запросов (CSRF).

Set-Cookie: auth_token=abc123; SameSite=Strict

🟠

Не храним токены в cookie (если можно)
Если возможно, используйте Authorization: Bearer заголовки вместо cookie.

Authorization: Bearer abc123

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.8K views09:10

Frontend | Вопросы собесов

🤔 Чем можно создать контекст позиционирования?

Контекст создают:
- свойство position с отличным от static значением;
- свойства transform, filter, perspective, will-change;
- z-index (если задан на позиционированном элементе).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.2K views16:10

Frontend | Вопросы собесов

🤔

Что происходит в момент запроса в браузере?

Когда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий.

🟠

Ввод URL и начало запроса
Пользователь вводит URL в адресную строку браузера.
Браузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.

🟠

DNS-разрешение
Если ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.

🟠

Установление TCP-соединения
После получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:
Браузер отправляет SYN-пакет серверу.
Сервер отвечает SYN-ACK пакетом.
Браузер отправляет ACK-пакет, подтверждая установление соединения.

🟠HTTPS и SSL/TLS
Если URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:
Браузер и сервер обмениваются сертификатами и выполняют шифрование данных.

🟠

Отправка HTTP-запроса
Браузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:

          GET / HTTP/1.1
     Host: www.example.com

🟠

Обработка запроса на сервере
Сервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц.

🟠

Получение и обработка HTTP-ответа
Браузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:

          HTTP/1.1 200 OK
     Content-Type: text/html
     Content-Length: 1234

     <!DOCTYPE html>
     <html>
     <head>
       <title>Пример страницы</title>
     </head>
     <body>
       <h1>Добро пожаловать!</h1>
     </body>
     </html>

🟠

Парсинг и рендеринг страницы
Браузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.
В процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.

🟠

Выполнение JavaScript
После парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.
JavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.9K views09:10

Frontend | Вопросы собесов

🤔 Что такое JSX?

JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript, упрощая создание React-компонентов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.2K views16:10

Frontend | Вопросы собесов

Forwarded from easyoffer

🎉 Easyoffer 2.0 — самый успешный краудфандинг в истории рунета в категории "Технологии"!

Мы это сделали! За считанные часы после старта, благодаря вашей поддержке, проект не просто стартовал — он взлетел.

💸 Собрано: 2 276 840 рублей

Это не просто цифра — это ваше доверие, ваша вера в идею, и ваша инвестиция в будущее карьеры сотен (а скоро — тысяч) специалистов.

💼 Благодаря этой сумме мы уже:

— Наняли ещё пару разработчиков и аналитиков
— Запустили активный сбор и разметку новых данных
— Ускорили разработку и подняли планку качества

Спасибо каждому, кто поверил в нас на старте! Дальше — только масштабирование и развитие. Мы строим сервис, который станет must-have для всех, кто ищет работу в IT.

👉 Присоединяйтесь сейчас — это только начало.

2.9K views16:35

Frontend | Вопросы собесов

🤔

Какие типы данных существуют?

Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты.

🚩

Примитивные типы:

🟠

Number
представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14.

🟠

String
представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!".

🟠

Boolean
имеет два значения, true и false, и используется для работы с логическими операциями.

🟠

Undefined
переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения.

🟠

Null
специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript.

🟠

Symbol
уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах.

🟠

BigInt
тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number.

🚩

Объекты

могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов.

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.9K views09:10

Frontend | Вопросы собесов

🤔 Какие особенности в JS?

JavaScript имеет динамическую типизацию, поддержку замыканий, однопоточность с асинхронностью, работу с прототипным наследованием и функции высшего порядка.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.6K views16:10

Frontend | Вопросы собесов

🤔

Что такое шаблонные литералы, и для чего они нужны?

Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.

🚩

Примеры использования

🟠

Интерполяция переменных и выражений
Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

🟠

Многострочные строки
Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

🟠

Встроенные выражения
Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

🟠

Вызов функций внутри шаблонных литералов
Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

🟠

Тегированные шаблонные литералы
Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.3K views09:10

Frontend | Вопросы собесов

Forwarded from easyoffer

Что такое PRO-подписка на easyoffer 2.0?

easyoffer PRO — это не просто доступ к базе, а полноценный инструмент для получения оффера.

🧠 База вопросов с собеседований

+ Анализ на основе 4,000 собеседований
+ Вероятность встречи каждого вопроса
+ Фильтрация по грейдам, компаниям, типам интервью
+ Примеры ответов: текстовые и видео
+ Готовьтесь к собеседованию в конкретную компанию

🛠 Тренажер "Проработка вопросов"

+ Флеш-карточки + интервальные повторения
+ Персональная система показа карточек в зависимости от ваших ответов
+ Упор на наиболее частые вопросы
+ Фокус на слабые места и быстрый прогресс

🎭 Тренажер "Реальное собеседование"

+ Сценарии на основе реальных интервью
+ Подготовка к конкретным компаниям
+ Итоговая статистика: прошёл/не прошёл

🧩 База задач с собеседований

+ Live-coding и System Design задачи
+ Оценка вероятности встречи задачи
+ Подготовка к задачам по конкретным компаниям

📋 База тестовых заданий

+ Задания из реальных вакансий
+ Фильтрация по технологиям и грейдам
+ Лучшие решения в доступе

📈 Тренды технологий в вакансиях

+ Топ-100 навыков, которые требуют компании
+ Динамика популярности технологий
+ Фильтрация по грейдам

🎁 Специальная цена до релиза:
3200 руб. за целый год

Сейчас PRO на 1 год стоит как будет стоить 1 месяц после релиза. Покупка также открывает доступ к закрытому бета-тестированию.
+ Вы можете активировать подписку в любой момент, например, когда начнете искать работу.

Предзаказ здесь: https://planeta.ru/campaigns/easyoffer

📌 Цена поднимется сразу после запуска.

Если вы хотите перестать угадывать, что спросят на собеседовании, и начать точечно готовиться на основе реальных данных — easyoffer PRO именно для вас.

Экономьте время. Получайте оффер легко.

2.7K views11:05

Frontend | Вопросы собесов

🤔 Что такое мемоизация?

Мемоизация — это техника оптимизации, при которой результаты выполнения функций кэшируются для ускорения последующих вызовов с теми же аргументами. В JavaScript мемоизация часто используется для сложных вычислений или рендеринга, где повторное выполнение одной и той же операции может быть дорогим. Функции, использующие мемоизацию, сохраняют результаты в памяти и возвращают их при тех же входных данных без повторного вычисления. Это улучшает производительность, особенно при работе с большими данными.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.8K views16:10

Frontend | Вопросы собесов

🤔 Что делает omit?

omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей.

В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce().

Реализация omit с Object.fromEntries() (современный способ)

function omit(obj, keys) {
    return Object.fromEntries(
        Object.entries(obj).filter(([key]) => !keys.includes(key))
    );
}

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]); 

console.log(safeUser); // { name: "Alice", age: 25 }

Реализация omit с reduce() (альтернативный способ)

function omit(obj, keys) {
    return Object.keys(obj).reduce((acc, key) => {
        if (!keys.includes(key)) acc[key] = obj[key];
        return acc;
    }, {});
}

const data = { a: 1, b: 2, c: 3 };
console.log(omit(data, ["b"])); // { a: 1, c: 3 }

Если используете Lodash, можно просто вызвать

import { omit } from "lodash";

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]);

console.log(safeUser); // { name: "Alice", age: 25 }

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

4.0K views09:10

Frontend | Вопросы собесов

🤔 Как работают события?

События фиксируют действия пользователя или системы: клик, ввод, наведение, загрузку. Обработчики событий подключаются через слушатели, и при наступлении события вызывается нужный код.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.7K views16:10

Frontend | Вопросы собесов

🤔 Что такое функциональное программирование?

Функциональное программирование (FP) — это парадигма программирования, в которой основной единицей кода являются функции. В FP функции работают с данными без изменения внешнего состояния и без побочных эффектов.

🚩

Основные принципы функционального программирования

🟠

Чистые функции (Pure Functions)
Функция называется чистой, если:
При одинаковых входных данных всегда возвращает одинаковый результат.
Не изменяет внешние переменные (нет побочных эффектов).
Нечистая функция (изменяет внешнюю переменную)

let count = 0;
function increment() {
    count += 1; // изменяет внешнюю переменную
    return count;
}

Чистая функция (зависит только от аргументов)

function increment(num) {
    return num + 1; // не меняет внешнее состояние
}
console.log(increment(5)); // 6
console.log(increment(5)); // 6 (всегда одинаковый результат)

🟠

Иммутабельность (Immutable Data)
Данные не изменяются, а создаются новые версии объектов.
Изменение объекта (нефункциональный подход)

const user = { name: "Alice", age: 25 };
user.age = 26; // изменяет объект

Создание нового объекта (функциональный подход)

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 26 }; // создаём новый объект

🟠

Функции высшего порядка (Higher-Order Functions)
Функция, которая принимает другую функцию в аргумент или возвращает функцию.

const numbers = [1, 2, 3];
const squared = numbers.map(n => n * n); // [1, 4, 9]

Пример: Функция, возвращающая другую функцию

const multiplyBy = (factor) => (num) => num * factor;
const double = multiplyBy(2);
console.log(double(5)); // 10

🟠

Функциональные методы массивов (map, filter, reduce)
Функциональные методы позволяют не мутировать массив, а создавать новый.
Используем map() для изменения элементов

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]

Используем filter() для фильтрации

const words = ["apple", "banana", "kiwi"];
const shortWords = words.filter(word => word.length < 6); // ["kiwi"]

Используем reduce() для вычислений

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0); // 10

🟠

Каррирование (Currying)
Разделение функции на несколько функций, каждая принимает по одному аргументу.

function sum(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

Пример: Каррированная функция

const sum = (a) => (b) => a + b;
console.log(sum(2)(3)); // 5

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.7K views09:10

Frontend | Вопросы собесов

🤔 Какая особенность в поведении у асинхронных callback?

Асинхронные callback-и не выполняются мгновенно. Они ставятся в очередь событий (event loop) и запускаются после завершения текущего стека вызовов. Это означает, что:
- Код после вызова асинхронного callback-а продолжается немедленно.
- Callback может сработать позже, вне текущего потока.
- Нужно учитывать асинхронный контекст при работе с состоянием, рендером и логикой приложения.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.6K views16:10

Frontend | Вопросы собесов

🤔 Какие статические методы promise знаешь?

Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами.

🟠

`Promise.resolve(value)` – создаёт выполненный промис
Возвращает успешно выполненный Promise с переданным значением.

Promise.resolve(42).then(console.log); // 42

🟠

`Promise.reject(error)` – создаёт отклонённый промис
Возвращает промис в состоянии "отклонён" (rejected).

Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"

🟠

`Promise.all(promises)` – ждёт ВСЕ промисы или первый `reject`
Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся.
Если один промис отклонится, Promise.all немедленно выдаст ошибку.

Promise.all([
    Promise.resolve(10),
    Promise.resolve(20),
    Promise.resolve(30),
]).then(console.log); // [10, 20, 30]

Ошибка прерывает выполнение

Promise.all([
    Promise.resolve(1),
    Promise.reject("Ошибка!"),
    Promise.resolve(3),
]).catch(console.error); // "Ошибка!"

🟠

`Promise.allSettled(promises)` – ждёт ВСЕ промисы, не падает при `reject`
Возвращает массив состояний (fulfilled или rejected) каждого промиса.
Никогда не отклоняется, даже если есть ошибки.

Promise.allSettled([
    Promise.resolve(100),
    Promise.reject("Ошибка!"),
    Promise.resolve(300),
]).then(console.log);

Выведет

[
  { status: "fulfilled", value: 100 },
  { status: "rejected", reason: "Ошибка!" },
  { status: "fulfilled", value: 300 }
]

🟠

`Promise.race(promises)` – ждёт ТОЛЬКО первый завершённый промис
Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.

Promise.race([
    new Promise(res => setTimeout(() => res("Промис 1"), 500)),
    new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)

🟠

`Promise.any(promises)` – ждёт ПЕРВЫЙ успешный промис
Возвращает результат ПЕРВОГО выполненного (fulfilled) промиса.
Если ВСЕ промисы отклонены (rejected), возвращает AggregateError.

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.resolve("Успех!"),
    Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"

Ошибка, если все промисы reject

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.4K views09:10

Frontend | Вопросы собесов

Forwarded from easyoffer

📅 Осталось 7 дней до конца краудфандинга

Мы на финишной прямой!

Если ты планировал присоединиться, но ещё не успел, сейчас идеальный момент.

Вознаграждения за поддержку:

🚀 PRO подписка к easyoffer 2.0 на 1 год по цене месячной подписки. Активировать подписку можно в любой момент, например, когда начнешь искать работу.
➕ Приглашение на закрытое бета-тестирование

👉 Поддержать easyoffer 2.0

Не откладывай на последний момент

📌 Если не получается оплатить через карту РФ — напишите мне @kivaiko, и мы найдём удобный способ

2.7K views11:06

Frontend | Вопросы собесов

🤔 Какие хранилища есть в браузере?

В браузере доступно несколько механизмов хранения данных:
1. localStorage — постоянное хранилище строковых пар ключ-значение, сохраняется между сессиями браузера.
2. sessionStorage — аналогично localStorage, но очищается при закрытии вкладки.
3. cookies — небольшие объёмы данных, могут передаваться на сервер, доступны и клиенту, и серверу.
4. IndexedDB — асинхронная база данных в браузере, подходит для хранения больших объёмов данных, включая объекты.
5. CacheStorage — используется в PWA и сервис-воркерах для кэширования запросов и ответов.
Каждое хранилище имеет своё назначение, ограничения и особенности использования.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.5K views16:10

Frontend | Вопросы собесов

🤔 Как реализовать адаптивную верстку?

Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).

🟠

Гибкие сетки (Flexbox, Grid, `max-width`)
Использование max-width вместо width

.container {
  width: 100%; /* Контейнер занимает всю ширину */
  max-width: 1200px; /* Но не больше 1200px */
  margin: auto; /* Центрирование */
}

Использование Flexbox

.container {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов, если не влезают */
  justify-content: space-between;
}

.item {
  width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* Один элемент в ряд на маленьких экранах */
  }
}

Использование CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

🟠

Медиа-запросы (`@media`)
Изменяют стили в зависимости от ширины экрана.

/* Десктоп (от 1024px) */
body {
  font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
  body {
    font-size: 16px;
  }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

🟠

Адаптивные изображения (`srcset`, `sizes`)
Позволяет загружать разные изображения в зависимости от устройства.

<img 
  src="image-400.jpg" 
  srcset="image-800.jpg 800w, image-1200.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" 
  alt="Адаптивное изображение">

🟠

Viewport (`meta viewport`)
Управляет масштабированием на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠

CSS-фреймворки (Bootstrap, Tailwind)
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">Контент</div>
    <div class="col-md-6 col-sm-12">Контент</div>
  </div>
</div>

Tailwind CSS

<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

Ставь 👍 и забирай 📚 Базу знаний

Please open Telegram to view this post

VIEW IN TELEGRAM

3.8K views09:10

2025/07/07 17:30:07
Back to Top

HTML Embed Code:

<iframe width="100%" src="https://www.bootg.com/buyppe/web?embed=1" title="Telegram Web" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>