响应式设计：为什么 CSS 不响应移动屏幕大小？

Question

我正在使用响应式CSS框架Skeleton，由于某种原因，当屏幕尺寸为移动宽度时，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; }

Answer 1

我注意到在您的实时站点上的骨架.css媒体查询：

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

没有关闭}。

我使用 css 的本地副本在 Chrome 中破解了它，它似乎为我修复了它。 你怎么看？

Answer 2

移动设备的默认媒体查询小于您提供的默认媒体查询。您是否正在尝试定位您知道适合这些宽度的特定移动设备？如果没有，这里是针对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/