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

ライブサイトのskeleton.cssで、メディアクエリに気づきました。

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

クロージングは​​ありません}。

cssのローカルコピーを使用してChromeでハッキングしましたが、修正されたようです。あなたは何を考えますか？

于 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 に答える