響應式設計：爲什麼css不響應手機屏幕尺寸？

我正在使用Skeleton，一個響應式CSS框架，並且出於某種原因，當屏幕大小爲移動寬度時，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是工作道具erly：

/* 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; }

來源

2013-02-02 novicePrgrmr

我在skeleton.css通知，實時網站，媒體查詢：

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

沒有關閉}。

我使用css的本地副本在Chrome中進行了黑客攻擊，它似乎爲我解決了這個問題。你怎麼看？

來源

2013-02-02 12:42:23 typeslug

哇，非常感謝！它總是這樣的哈哈.... – novicePrgrmr

您的詳細的審查和我的問題的答案讓我的一天。我展示了我的妻子，她無法相信一個完全陌生的人會花時間去幫助。我一定會向前付款。謝謝！ – novicePrgrmr

不客氣。我建議你使用一個文本編輯器/ IDE來驗證你的代碼。如果我沒有將'n'樣式表代碼粘貼到我的編輯器（netbeans）中，我就不會發現它。 – typeslug

移動設備的默認媒體查詢比您提供的要小。您是否試圖針對您認爲符合這些寬度金額的特定移動設備？如果未在此處是針對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/

來源

2013-02-02 12:24:20 DMTintner

對不起，我只添加了肖像移動CSS。我已經用兩種方式更新了這個問題，因爲Skeleton使用單獨的媒體查詢進行肖像移動和橫向移動。這不是寬度問題，而是媒體查詢不被識別。 – novicePrgrmr

響應式設計：爲什麼css不響應手機屏幕尺寸？

回答

相關問題