css @media顯示問題，需要澄清

好吧，所以我在一個小網站上工作了一段時間，得到了一個移動友好版本的呼叫，所以我採取了主要的HTML/CSS，做了重複，所以我可以工作和不要害怕將任何東西搞亂，然後在完成時將原始鏈接連接到新的移動css。css @media顯示問題，需要澄清

現在，我大致這樣做了，我現在只在主要的移動頁面/索引上工作，我想出了......呃，讓我給你看看。

這是通過複製/粘貼在當前實際網站上的同一個html，但只有移動css（僅用於快速測試）。這是它應該看起來如何：http://somdowprod.net/4testing/indexMOBILESAMPLE 沒有什麼奇特的。

現在，這是與上面通過媒體查詢購買了相同的內容鏈接： http://somdowprod.net/4testing/index2

在這第二個鏈接，如果調整您的瀏覽器的東西任何接近小於400width，你會看到它像它應該的那樣向下移動，但被扭曲了。另外，當在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我添加相同的：

編輯：複製錯誤的CSS代碼

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

任何想法？我迷路了，我可以理解它是否在第一個原始版本上不起作用，但是......是的。

來源

2011-07-28 somdow

我不得不通過火狐看看它，我沒有看到任何失真，它看上去一切正常，一個問題，我沒有看到在部分：

<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，這意味着它不會調整瀏覽器的大小，這實質上可能會導致問題。

希望這會有所幫助。

來源

2011-07-28 14:09:35

如果刪除此代碼從2882maincssHTML5.css它會工作：

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

您已經鏈接的樣式表：

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

但是你可以重寫，除去兩個type（在HTML5中不需要）和min-width，因爲它們是不必要的。

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

來源

2011-07-28 14:27:44 tw16

css @media顯示問題，需要澄清

回答

相關問題