Привет!) Возникла необходимость верстать сайт для экранов свыше 1200 и выше.
За 2 года верстки верстал по стандарту до 1200px.
Теперь конечно я задумался, правильно ли я прописал медиа запросы от 1200 и выше?
Что скажете коллеги?
/* = 1600px
-------------------------------------------------------------- */
@media (min-width: 1600px){
.container {
width: 1570px;
outline: 1px solid red;
}
}
/* = 1440px - 1600px
-------------------------------------------------------------- */
@media (min-width: 1440px) and (max-width: 1600px){
.container {
width: 1410px;
outline: 1px solid purple;
}
}
/* = 1366px - 1440px
-------------------------------------------------------------- */
@media (min-width: 1366px) and (max-width: 1440px){
.container {
width: 1336px;
outline: 1px solid blue;
}
}
/* = 1200px - 1366px
-------------------------------------------------------------- */
@media (min-width: 1200px) and (max-width: 1366px){
.container {
width: 1170px;
outline: 1px solid green;
}
}
/* = 992px - 1200px
-------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px){
.container {
width: 970px;
}
}
/* = 768px - 991px
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
.container {
width: 750px;
}
}
/* = 480px - 767px
-------------------------------------------------------------- */
@media (min-width: 480px) and (max-width: 767px) {
.container {
min-width: 450px;
}
}
/* = 320px - 479px
-------------------------------------------------------------- */
@media (min-width: 320px) and (max-width: 479px) {
.container {
min-width: 320px;
max-width: 456px;
}
}
Простой
