Недавно начал пользоваться Media запросами.
Так вот, есть у меня такое вот правило
/* =============================================================================
Less than 768px
========================================================================== */
@media only screen and (max-width: 767px) {
body{min-width:0;}
/* Container */
.container { margin:0 auto; width:456px; overflow:hidden;}
/* Global */
.container .grid_1,
.container .grid_2,
.container .grid_3,
.container .grid_4,
.container .grid_5,
.container .grid_6,
.container .grid_7,
.container .grid_8,
.container .grid_9,
.container .grid_10,
.container .grid_11,
.container .grid_12 {
width:416px;
clear: both;
float: none;
margin-left: 0;
margin-right: 0;
display:inline-block;
padding-left: 20px;
padding-right: 20px;
/* IE 6&7 */
zoom:1;
*display:inline;
}
}
Как правильно нужно дописать правило, чтобы стили которые написаны выше для
@media only screen and (max-width: 767px) {}
Так же были правилами для все мобильных телефонов?
Заметьте! Именно те же правила что выше написанные.
Конечно я могу использовать такое правило
/* =============================================================================
Less than 480px
========================================================================== */
@media only screen and (max-width: 479px) {}
Но сайт смотрится ужасно под этот запрос.
Тупо не влазают блоки, портится вся фишка дизайна.
А вот стили которые написаны в
@media only screen and (max-width: 767px) САМОЕ ТО! =)
Простой
