Адаптивный дизайн: почему css не реагирует на размер мобильного экрана?

Я работаю со Skeleton, отзывчивой структурой CSS, и по какой-то причине css не отвечает на запрос мобильного мультимедиа, когда размер экрана соответствует ширине мобильного устройства.

Он отвечает на медиа-запрос планшета, но возвращается к стандартной ширине CSS после того, как экран переходит в мобильные размеры.

Это живой сайт, с которым я работаю:

http://fine-grain-2.myshopify.com/

Вот HTML, с которым я работаю:

<div class="container">
    <div class="one column alpha">One</div>
    <div class="eleven columns omega">Eleven</div>
    <div class="two columns alpha">Two</div>
    <div class="ten columns omega">Ten</div>
</div>

Вот CSS-запрос мобильного медиа:

/*  #Mobile (Portrait) 
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .two-thirds.column  { width: 300px; }

        /* Offsets */   
        .container .offset-by-one,              
        .container .offset-by-two,                  
        .container .offset-by-three,                
        .container .offset-by-four,                     
        .container .offset-by-five,                     
        .container .offset-by-six,                  
        .container .offset-by-seven,                
        .container .offset-by-eight,                
        .container .offset-by-nine,                     
        .container .offset-by-ten,                  
        .container .offset-by-eleven,                           
        .container .offset-by-fifteen { padding-left: 0; }           

    }    


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .columns, .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .one-third.column, 
        .container .two-thirds.column { width: 420px; }
    }

Вот правильно работающий CSS-запрос медиа для планшета:

  /* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container { width: 768px; }
    .container .column, 
    .container .columns { margin-left: 10px; margin-right: 10px;  }
    .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
    .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }

    .container .one-third.column                { width: 236px; }
    .container .two-thirds.column               { width: 492px; }       

    /*****************************
        12 Column
        ((768/12) - 20) * 1 = 44
    *****************************/

    .container .one.column                   { width: 44px;  }
    .container .two.columns                  { width: 108px; }
    .container .three.columns                { width: 172px; }
    .container .four.columns                 { width: 236px; }
    .container .five.columns                 { width: 300px; }
    .container .six.columns                  { width: 364px; }
    .container .seven.columns                { width: 428px; }   
    .container .eight.columns                { width: 492px; }
    .container .nine.columns                 { width: 556px; }
    .container .ten.columns                  { width: 620px; }   
    .container .eleven.columns               { width: 684px; }   
    .container .twelve.columns               { width: 748px; }



    /* Offsets */   
    .container .offset-by-one                { margin-left: 64px;  }
    .container .offset-by-two                { margin-left: 128px; }
    .container .offset-by-three              { margin-left: 192px; }
    .container .offset-by-four               { margin-left: 256px; }
    .container .offset-by-five               { margin-left: 320px; }
    .container .offset-by-six                { margin-left: 384px; }
    .container .offset-by-seven              { margin-left: 448px; }
    .container .offset-by-eight              { margin-left: 512px; }
    .container .offset-by-nine               { margin-left: 576px; }
    .container .offset-by-ten                { margin-left: 640px; }
    .container .offset-by-eleven             { margin-left: 704px; }

html css responsive-design media-queries skeleton-css-boilerplate
person novicePrgrmr    schedule 02.02.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Я замечаю в скелете.css на вашем действующем сайте медиа-запрос:

@media only screen and (min-width: 768px) and (max-width: 959px) { ....

не имеет закрытия }.

Я взломал его в Chrome, используя локальную копию css, и это, похоже, исправило это для меня. Как вы думаете?

person typeslug    schedule 02.02.2013
comment
Ваш подробный обзор и ответ на мой вопрос сделали мой день. Я показал жене, и она не могла поверить, что совершенно незнакомый человек посвятит свое время помощи. Я обязательно заплачу вперед. Спасибо! - person novicePrgrmr; 02.02.2013
comment
Пожалуйста. Я бы порекомендовал вам использовать текстовый редактор/ide, который проверяет ваш код по мере продвижения. Я бы сам этого не заметил, если бы не вырезал и не вставлял код таблицы стилей в свой редактор (netbeans). - person typeslug; 02.02.2013

arrow_upward
0
arrow_downward

Медиа-запрос по умолчанию для мобильных устройств меньше, чем вы предоставляете. Вы пытаетесь настроить таргетинг на конкретное мобильное устройство, которое, как вы знаете, соответствует этим значениям ширины? Если нет, вот код для таргетинга на iphone и другие обычные смартфоны:

   /* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

Вот ссылка на статью о медиа-запросах и другие фрагменты кода для таргетинга на другие устройства, в том числе особенно интересный для таргетинга только на iphone4, а не на другие смартфоны: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

person DMTintner    schedule 02.02.2013
comment
Извините, я добавил только портретный мобильный CSS. Я обновил вопрос с обоими, поскольку Skeleton использует отдельные медиа-запросы для мобильных устройств с портретной и горизонтальной ориентацией. Проблема не в ширине, а в том, что медиа-запрос не распознается. - person novicePrgrmr; 02.02.2013