Есть три медиа выражения для трех типов экранов устройств (мобильного, планшетного, и дескотпного). На мобильном разрешении я хочу ограничить минимальную и максимальную ширину при которых стили для мобильных устройств будут срабатывать.
.container {
min-width: 320px;
max-width: 480px;
}
Таким образом сайт на мобильных устройствах различных габаритов будет отображаться на всю ширину экрана устройства, размеры которых разнятся от 320px до 480px. Выше 480px сайт будет оставаться в фиксированном разрешении (480px) расположенным центру.
.container {
min-width: 320px;
max-width: 480px;
margin: 0 auto;
}
Затем на планшетной версии, разрешение экрана составит 768px
@media (min-width: 768px) {
.container {
width: 740px;
}
}
Но вот не задача то, сверху наследуются правила min-width
и max-width
которые для планшета совершено не нужны. Если min-width
никакого влияния не оказывает, то max-width
сжимает сайт до своего значения 480px.
Можно решить эту задачу просто дав max и min-width одинаковые значения необходимой ширины
@media (min-width: 768px) {
.container {
width: 740px;
min-width: 740px;
max-width: 740px;
}
}
В таком случае значения свойств переопределяться, но это выглядит не очень правильно как по мне. Есть ли другое решение, более эстетичное?
margin:0 auto
, а на необходимых разрешениях медиазапросами устанавливайтеmax-width