スマートフォンのポートレート、ランドスケープ、デスクトップのメディアクエリですか？

Question

私はスマートフォンの向きとデスクトップに異なるメディアクエリを設定しようとしていますが、私はポートレートとランドスケープをターゲットにしたいと思います。私はそのような他のすべてのスタックリンクを認識していています

Media query to target most of smartphone 3 media queries for iphone portrait, landscape and ipad portrait

しかし、私はまだ私の風景1が動作していない、問題が生じています、これは私が使用していますコードです：

Desktop css first 
    -- csss for desk -- 

Portrait: 

    @media only screen and (min-device-width: 320px) and (max-device-width: 479px) { 
    body { 
     padding: 0 !important; 
    } 
    .infoShowWrapper { 
     width: 268px; 
    } 
    .heroImage { 
     margin-top: 0; 
     height: 200px; 
     width: 100%; 
     background: #fff url(assets/images/hero_small.jpg) no-repeat center center; 
    } 
    .navbar-fixed-top { 
     margin: 0 !important; 
    } 
    .box-item { 
     width: 280px; 
    } 
    .seaBkg { 
     background-image: url(assets/images/mare_2x.jpg); 
    } 
} 

Landscape: 

    @media only screen and (min-device-width: 480px) and (max-device-width: 640px) { 
    body { 
     padding: 0 !important; 
    } 
    .heroImage { 
     margin-top: 0; 
     height: 200px; 
     width: 100%; 
     background: #fff url(assets/images/hero_small.jpg) no-repeat center center; 
    } 
    .navbar-fixed-top { 
     margin: 0 !important; 
    } 
    .box-item { 
     width: 440px; 
    } 
    .infoShowWrapper { 
     width: 440px; 
    } 
    .seaBkg { 
     background-image: url(assets/images/mare_2x.jpg); 
    } 
} 

風景コードがさえ考えられてばかりではないようである

Answer 1

を増やしてみてください

orientation : landscape 

@media only screen and (min-device-width: 480px) 
        and (max-device-width: 640px) 
        and (orientation: landscape) { 

//enter code here 
} 

参照のためにthis siteまたはthis snippetを参照してください。