Как создать адаптивный дизайн. @media
Как создать адаптивный дизайн. @media
<style>
@media (min-width: 900px) { //минимальный размер экрана 900 пикселей
.block1 { //то есть для компьютера
width: 70%; //ширина блоков 70% и 30% соответственно
} //значит друг рядом с другом они будут
.block2 { //находится в таком соотношении
width: 30%;
}
}
@media (max-width: 400px) { //максимальный размер экрана 400 пикселей
.block1 { //то есть вид с телефона
width: 100%; //оба блока имеют ширину по 100%
} //то есть один сползет под другой
.block2 {
width: 100%;
}
}
</style>
Здесь представлен самый простой css код для адаптивного шаблона. В нем не учтена ширина экрана планшета (600 пикс), хотя не всегда это и обязательно.