css @media表示の問題、明確化が必要です。

Question

私は小規模なサイトで働いていましたので、携帯フレンドリーなバージョンを求めていましたので、メインのhtml/cssをとりました。何かをつぶすのを恐れることはありません。そして、完了したら新しいモバイルCSSにオリジナルをリンクしてください。

私はこれを大雑把に言って、今はメインのモバイルページ/インデックスでのみ作業しています。私は思いつきました。まあ、あなたに見せてください。

これは、現在の実際のサイトにコピー/ペーストを使用していますが、モバイルCSSが添付されている（すぐにテストするための）同じHTMLです。これはどのように見えるはずです：http://somdowprod.net/4testing/indexMOBILESAMPLE 何も想像できません。

は今、これはメディアクエリ経由で買った同じ内容のリンク上記と同じです：あなたはどこにでも400width未満の近くに何かするには、ブラウザのサイズを変更する場合は、この第二のリンクでは http://somdowprod.net/4testing/index2

、あなたが表示されますそれはそのように仮定されているようにシフトするが、歪んでいる。また、iPhoneで見ると、同じ混乱が見えます。私は上部と下部の間で異なるでしたすべてが下に、私は

<link href="2882maincssHTML5.css" rel="stylesheet" type="text/css" media="screen" /> 
<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)" /> 

やCSSのを追加したことを、私は同じことを追加され

：

EDIT：CSSのコピーされた間違ったコードを

@media screen and (min-width: 0px) and (max-width: 480px) { 
    @import url("mobile.css"); 
} 

私は失われています、それは最初の元のもので動作しない場合は理解することができますが...はい。

Answer 1

私はFirefoxを通じ、それを見ていた、と私は任意の歪みを見ていない、それが正常に動作しているようだ、私が見た一つの問題は、セクションにあった：

<aside id="topics" class="floatEmL"> 
<h3>Hello and WELCOME to 2882films website.</h3> 
<p>&nbsp;</p> 
<p> 2882 Films create highly targeted content that delivers results. 
We provide clients with the highest quality video production capabilities 
and then deliver that content through all avenues of media distribution 
from the Web to Television. Here at 2882Films, we broadcasts your 
message directly to your audience. </p> 

の幅ブラウザが変更され、このボックスの端が右に20pxほどぶら下がってしまいます。つまり、ブラウザのサイズが変更されていないため、本質的に問題が発生する可能性があります。

これは少し役に立ちます。

Answer 2

あなたが2882maincssHTML5.cssのうち、このコードを削除した場合、それは動作します：

@media screen and (min-width: 0px) and (max-width: 480px) { 
    @import url("mobile.css"); 
} 

あなたは既にスタイルシートリンクしている：あなたはtypeの両方を削除するために書き換えることができますしかし

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and (min-width: 0px) and (max-width: 480px)" /> 

を（ HTML5では不要です）、min-widthは不要です。

<link href="mobile.css" rel="stylesheet" media="screen and (max-width: 480px)" />