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

Метаданные статьи

Идентификатор статьи:
4
Категория:
Рейтинг :