Я пытаюсь установить 2 разные ширины для #home-content-wrap. В конечном итоге я хочу иметь возможность установить ширину div home-content-wrap 80%, если размер экрана меньше 768 пикселей! Это похоже на:
1156 ширина:80% ‹1156 ширина:100% ‹768 ширина: 80%
Пара замечаний: Но ширина ‹768:80% не работает! Если я уберу условие >1156, тогда сработает ‹768! Если вы внимательно посмотрите на код, то увидите, что условие ‹768 изменяет цвет текста, но не ширину... или не цвет фона.
Вот мой стиль страницы/div:
*{margin:0;padding:0;text-align:center;}
#wrap{width:100%;height:100%;}
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid blue;}
/**Responsive Columns**/
.home_lay_1_of_2 {
width: 49.5%;
margin-left:0.50%; background:lightblue;
}
.home_lay_1_of_3 {
width: 49.5%; background:grey;
}
вот точки разрыва:
/****breakpoint 1**/
@media only screen and (max-width: 768px) {
#home-content-wrap{width:80%; max-width:1600px; height:auto; margin:50px auto; color:
yellow; border:1px solid yellow;}
.home-txt{float:left; width:100%; height:500px; }
.home_lay_1_of_2 {
width: 100%;
margin-left:0;
}
.home_lay_1_of_3 {
width: 100%;
}
}
/***Breakpoint 2***/
@media only screen and (max-width: 1156px) {
#home-content-wrap{width:100%; max-width:1600px; height:auto; margin:50px auto;
border:1px solid black;}
}
вот мои отзывчивые настройки:
.section {
clear: both;
padding: 0;
margin: 0;
}
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.col {
display: block;
float:left;
}
Вот скрипт http://jsfiddle.net/GQgNx/
Что здесь не так?
(min-width: 768px), вы позволяете обоим медиа-запросам нацеливаться на разные разрешения, чтобы специфичность не вступала в игру. 03.10.2013