UI/UX Адаптивный дизайн

[stareyshina]

Подскажите кто нибудь, как адаптировать сайт под все устройства (компьютер, планшет, телефон) с помощью CSS

 

[ordinaria1]

Надо добавить адаптивные CSS с помощью медиа-запросов.
Для телефонов:

@media only screen and (max-width: 767px) {
    .container {padding: 10px;}
}

Для планшетов:

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .container {max-width: 750px;}
}

Для широкоформатных (например 2К+) экранов:

@media only screen and (min-width: 2560px) and (max-width: 3839px) {
    .container {max-width: 2000px;}
}

Твои дефолтные стили (без медиа-запроса) будут применяться ко всем типам экранов, поэтому повторять один и тот же CSS смысла нету.

 

[stareyshina]

Надо добавить адаптивные CSS с помощью медиа-запросов.
Для телефонов:

@media only screen and (max-width: 767px) {
    .container {padding: 10px;}
}

Для планшетов:

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .container {max-width: 750px;}
}

Для широкоформатных (например 2К+) экранов:

@media only screen and (min-width: 2560px) and (max-width: 3839px) {
    .container {max-width: 2000px;}
}

Твои дефолтные стили (без медиа-запроса) будут применяться ко всем типам экранов, поэтому повторять один и тот же CSS смысла нету.

Спасибо