Я настраиваю загрузку для отображения 3 >> 2 >> 1 столбцов при изменении размера браузера или небольших устройствах. Я использовал медиа-запрос css3, который работает во всех браузерах, кроме Safari. Ниже приведен css, который я использовал. Он всегда использует первый медиа-запрос и из-за этого вызывает проблемы в Safari. Я тестировал Mac и Window Safari и столкнулся с той же проблемой. Пожалуйста помоги.
Область просмотра добавлена в раздел заголовка HTML
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
Используется CSS3:
/*Apply different margin based on media size*/
@media (min-width:1632)
{
.two-column .row-fluid [class*="span"]:nth-child(3n+1)
{
margin-left:100px;
}
}
@media (min-width: 981px) and (max-width: 1631px)
{
.two-column .row-fluid [class*="span"]:nth-child(2n+1)
{
margin-left:100px;
}
}
@media (min-width: 982px) and (max-width: 1155px)
{
.two-column .row-fluid [class*="span"]:nth-child(2n+1)
{
margin-left:10px;
}
}
@media (min-width: 545px) and (max-width: 981px)
{
.two-column .row-fluid .span6
{
margin-left:5%;
}
}
@media (max-width: 546px)
{
.two-column .row-fluid .span6
{
margin-left:5px;
}
}
@media (min-width: 1632px)
- person Jason Yaraghi   schedule 30.09.2013