0

我正在使用响应式 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; }
4

2 回答 2

5

I notice in the skeleton.css on your live site, the media query:

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

does not have a closing }.

I hacked it in Chrome using a local copy of the css and it seemed to fix it for me. What do you reckon?

于 2013-02-02T12:42:23.700 回答
0

移动设备的默认媒体查询比您提供的要小。您是否尝试针对您知道适合这些宽度量的特定移动设备？如果不是这里是针对 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-标准设备查询/

于 2013-02-02T12:24:20.163 回答