網站優化媒體屏幕寬度的問題（@media CSS）

我有一個網頁，我把一些@media CSS屬性是因爲我想使其更適應。我有一個圖像標題。它看起來很好正常的電腦屏幕，即使我把最小寬度鉻。但是我的手機看起來不太好（nexus 4）。圖像未與屏幕中心對齊。網站優化媒體屏幕寬度的問題（@media CSS）

這裏是頁：PAGE。

在我的手機，它看起來是這樣的：

我嘗試了以下代碼，但沒有奏效：

HTML：

<header> 
    <div class="container_12"> 
     <div class="grid_12"> 
     <h1> 
       <img src="images/logo.png"> 
     </h1> 
     <div class="clear"> 
     </div> 
     </div> 
    </div> 
</header>

CSS：

@media only screen and (max-width: 479px) 
{ 
    body 
    { 
     min-width:300px; 
    } 

    header h1 
    { 
     margin: 20px 0px 0px; 
     float: none;  
    } 
}

我有地說，我認爲這不是一個類「container_12」類「grid_12 「的問題，因爲（除了與圖像的H1）它們包括導航菜單，以及和這個人是正確的在中央。

來源

2013-10-27 Apolo Radomer

您的標題圖片有多大？你也有專門針對移動使用的標題圖片嗎？像一個相同的標題，只是更小？因爲您可以使用'@ media'查詢來獲得優勢，併爲每個設備專門設置標題圖像。 – PatchGuru

@PatchGuru 420PX是圖像。我有它350px，它也沒有在中心對齊。這是我認爲的「h1」問題。或者，也許我的手機屏幕小於300像素（我設置的最小寬度） –

我終於嘗試這一個和工作。我很樂意看到更多的選擇（答案）。

header h1 img 
{ 
    width: 100%; 
}

來源

2013-10-27 22:57:39

網站優化媒體屏幕寬度的問題（@media CSS）

回答

相關問題