Добавить в корзинуПозвонить
Найти в Дзене
EXALME

Как правильно адаптировать сайт с помощью CSS кода

Всем привет, я занимаюсь WEB программированием уже достаточно долгое время. Сегодня я попытался узнать, что больше программисты предпочитают для адаптации, но по факту мало что нашёл на русскоязычных сайтах. Особенно я практически ничего не нашёл про адаптацию сайтов с помощью css кода. Поэтому я бы хотел поделиться своим недолгим опытом, который может помочь многим как начинающим, так уже и продвинутым программистам. Также я бы рекомендовал писать код адаптации в отдельном файле. Для адаптивной вёрстки с помощью css кода достаточно использовать следующую css конструкцию: @media all and (max-width : значение в пикселях) {
Свойства CSS
} Теперь давайте разберёмся, что же значит всё это. Для компьютера эта запись выглядит следующим образом: Все экраны, разрешение пикселей которых менее максимального значения (max-width), должны использовать следующие свойства CSS. @media all and (max-width : 769px) { container { max-width: 90%; width: 100%; margin: 0 auto; } } В данном случае я привёл

Всем привет, я занимаюсь WEB программированием уже достаточно долгое время.

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

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

Также я бы рекомендовал писать код адаптации в отдельном файле.

Для адаптивной вёрстки с помощью css кода достаточно использовать следующую css конструкцию:

@media all and (max-width : значение в пикселях) {
Свойства CSS
}

Теперь давайте разберёмся, что же значит всё это.

Для компьютера эта запись выглядит следующим образом: Все экраны, разрешение пикселей которых менее максимального значения (max-width), должны использовать следующие свойства CSS.

@media all and (max-width : 769px) {

container {

max-width: 90%;

width: 100%;

margin: 0 auto;

}

}

В данном случае я привёл пример кода для адаптации контейнеров под все экраны, которые меньше 769 пикселей (планшеты).