Как создать адаптивный дизайн. @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 пикс), хотя не всегда это и обязательно.