画面サイズが小さい場合、メディアクエリのCSSが正しく動作しない

Question

私はSwiperを使用してレスポンシブウェブサイトを作成しました。私は私のCSSで@mediaのクエリを使ってさまざまな画面サイズと向きに合わせました。

最初は、1つのメインCSS、1つのランドスケープCSS、1つの垂直CSSがあります。私はメインCSSに2つのオリエンテーションCSSをインポートしました。 main cssのみがhtmlファイルにあります。ウェブサイトはすべての画面サイズで正常に動作します。メディアに関するCSSのスニペットは以下の通りです：

@media screen and (orientation:landscape) and (min-width:700px) { 

    @media screen and (orientation:landscape) and (min-aspect-ratio:16/10) { 

    @media screen and (orientation:portrait) 

は、その後、私はそんなに私 catすべてが一つのファイルに.CSS CSSのインポートを使用していないお読みください。私はまた2つの @import行を削除しました。その後、ウェブサイトが正しく動作しません。具体的には、小さな画面のすべての要素が標準サイズに戻ります。私はCSSの構造をチェックしました。これらの要素は、親のCSSから本来の意味で @media {}に囲まれたスタイルを失います。

すべてのコードのフィドルはhereです。ローカルのイメージファイルを取得しようとしているので動作しません。

個別のCSSファイルを使用している作業用Webサイトはthisです。 Github上にあるので、ソースファイルを簡単に見ることができます。

私はあなたがうまくいけば、それは感謝の あなたのフィドルの横を助けるインポートされていない場合

Answer 1

は、タブレットとモバイルのためにこれらのメディア・スクリーンを使用して...ので、これは愚かな過ち原因である可能性がありますCSSには本当に新しいですが、トップでこれを示してい

@media only screen and (max-width: 1024px){} 
@media only screen and (max-width: 768px){} 
@media only screen and (max-width: 767px){}