Что необходимо знать и использовать для вёрстки адаптивного дизайна.
Самым первым делом необходимо добавить:
<head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></head>
В таблице стилей:
@media only screen and (min-width: 768px) {
.primer{
width:100%;
}
}
Это значит, что если ширина дисплея больше 768 пикселей, то ширина объекта с классом primer будет равна 100%
@media only screen and (min-width: 769px) and (max-width: 1600px) {
.primer{
width:50%;
}
}
Если ширина дисплея больше 769, но меньше 1600 пикселей, то ширина блока с классом пример будет равна 50%.
И на последок рассмотрим ситуацию когда ширина дисплея меньше 1920 пикселей
@media only screen and (max-width: 1920px) {
.primer{
width:33%;
}
}
В этом случае ширина объекта будет равна 33%