Адаптивный дизайн сайта

Отображение сайтов зависит от ширины экрана. Для того чтобы задать правила по которым контент будет передаваться браузеру существуе CSS правило media

flexbox

css grid

CSS

@media screen and (min-width: 1025px) /* Width */ { body { background: blue; } .small { /* на этом разрешении это меню не видно */ display: none; } .medium { /* на этом разрешении это меню не видно */ display: none; } .small_plus_medium { /* на этом разрешении это меню не видно */ display: none; } }

@media screen and (max-width: 1024px) and (min-width: 800px) /* Medium */ { body { background: green; } .small { /* на этом разрешении это меню не видно */ display: none; } .wide { /* на этом разрешении это меню не видно */ display: none; } }

@media screen and (max-width: 799px) /* Small */ { body { background: red; } .wide { /* на этом разрешении это меню не видно */ display: none; } .medium { /* на этом разрешении это меню не видно */ display: none; } .medium_plus_width { /* на этом разрешении это меню не видно */ display: none; } }

Html

Адаптивный дизайн. Пример.