Вопрос о Media Queries?

Question

[Alibek Kulseitov]

Привет!) Возникла необходимость верстать сайт для экранов свыше 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; 	
	}
	
}

Answer 1

[Кирилл Терентьев]

Зачем каждый раз изменять размер контейнеров? Это плохая практика в верстке. Если ты начал так жестко хардкодить ширину, значит нужно вернуться на пару этапов назад и посмотреть как это можно сделать по другому.

Comments

[Alibek Kulseitov]

Ну я следую принципам бутстрапа

[Alibek Kulseitov]

А как по другому зафиксировать ширину сайта? Мне ведь не нужен сайт на container fluid

[Кирилл Терентьев]

Алибек Кулсеитов: Зачем ее вообще фиксировать если ты делаешь адаптив?

[Alibek Kulseitov]

Кирилл Терентьев: Ну ведь дизайн рисуют например на 1200px или скажем на 996px. Ну вот базовую ширину дизайна же нудно зафиксировать) а далее уже адаптировать. Адаптивная верстка не значит что сайт должен быть на всю ширину монитора))

Answer 2

[Максим]

max-width вроде не надо
достаточно так :

@media screen and (min-width: 980px){}
@media screen and (min-width: 1024px){}
@media screen and (min-width: 1768px){}
и т д

Comments

[Alibek Kulseitov]

/* =
-------------------------------------------------------------- */
media (min-width: 320px){

.container {
min-width: 320px;
outline: 1px solid green;
}

}

/* =
-------------------------------------------------------------- */
media (min-width: 480px){

.container {
min-width: 450px;
outline: 1px solid purple;
}

}

/* =
-------------------------------------------------------------- */
media (min-width: 768px){

.container {
min-width: 750px;
outline: 1px solid green;
}

}

/* =
-------------------------------------------------------------- */
media (min-width: 992px){

.container {
min-width: 970px;
outline: 1px solid brown;
}

}

/* =
-------------------------------------------------------------- */
media (min-width: 1280px){

.container {
min-width: 1250px;
outline: 1px solid green;
}

}

/* =
-------------------------------------------------------------- */
media (min-width: 1440px){

.container {
min-width: 1410px;
outline: 1px solid purple;
}

}

/* =
-------------------------------------------------------------- */
media (min-width: 1600px){

.container {
width: 1570px;
outline: 1px solid red;
}

}

Максим Жаров так?)

[Максим]

Алибек Кулсеитов: ну вроде бы да ! проверьте - должно сработать , максимальный запрос должен перебить минимальный при пересечении

Answer 3

[Максим Софронов]

Посмотрите на Бутстрап и как там устроена сетка. Ваш вариант, имхо, ненужное усложнение простой вещи.

Comments

[Alibek Kulseitov]

На бутстрапе нету 1600, исходник ( дизайн) на 1600

[Максим Софронов]

Алибек Кулсеитов: ну вот просто и растягивайте от бутстраповских 1200 до 1600, ограничив ширину max-width.