響應式設計的CSS問題

我最近爲我的舊格式網站添加了mobile.css，使它在高端移動設備上看起來沒什麼問題。響應式設計的CSS問題

幾乎所有頁面在帖子開始時都有一個圖像，只有屬性float：left。

.field-type-image img 
    { 
    float: left; 
    }

它在正常屏幕上看起來沒問題。我用@media屏幕和（最大寬度：1024）添加了一個新的css，並調整了幾個值，使其在手持設備上看起來不錯。我希望在每篇文章開頭的時候讓圖片變得小小一點，幾乎是實際分辨率的一半。因此我嘗試了這個。

.field-type-image img 
    { 
    float: left; 
    width: 46%; 
    height: 32%; 
    }

圖像的寬度似乎減少了我的ipad，手機等等的方式應該是，但高度仍然是原來的一樣。所以它看起來非常糟糕。但是，如果我在計算機的普通瀏覽器上縮小屏幕寬度，那麼確實會產生「高度：32％」的效果。並且看起來不錯。但在手機瀏覽器中，它看起來像是高度：32％;不管用。例如。 http://www.rakeshmondal.info/IR-object-detection

如何降低在移動設備上工作的圖像的CSS高度？由於我網站上的每個帖子都有不同分辨率的圖片，因此我無法使用固定值來減小高度。像width：300px;高度：300像素;.

我希望我很清楚。在此先感謝:)

來源

2014-02-13 Rakesh

有很多很好的例子並回答這個問題，但在嘗試複雜的事情之前，試試這個小小的修改並看看。使高度自動，清除緩存並運行玉米，然後從你的ipad中檢查。

.field-type-image img 
{ 
    float: left; 
    width: 46%; 
    height: auto; 
}

來源

2014-02-14 02:12:02 Sanju

對不起，評論有點晚。是的，你是對的。我只是把高度做成：auto;只是響應式設計中的一行代碼，它開始像魅力一樣工作。謝謝三聚......謝謝。 – Rakesh

您需要在您的html文檔的<head>標記中包含<meta name="viewport" content="width=device-width, initial-scale=1.0;">。

這樣做會檢測到正在使用的設備，然後如果檢測到該設備將遵循媒體查詢。

如果沒有該代碼，網站將在桌面上響應，但不在移動設備上響應。

這是一個有益的article from smashing magazine.

來源

2014-02-13 14:28:05

試着改變你的CSS到什麼如下。

.field-type-image img 
{ 
    float: left; 
    max-width: 100%; /* keeps perspective for media queries */ 
}

如果你想要的形象「開始」小的一定尺寸的屏幕，我建議在可管理大小的容器包裝是img。

例如，您的樣式表「可以」像這樣的事情（只是舉個例子，你的HTML和CSS會有所不同，但概念是相同的）：

@media (max-width: 767px) { 
    .field-type-image 
    { 
    width: 300px; 
    float: left; 
    } 
    .field-type-image img 
    { 
    max-width: 100%; /* keeps perspective for media queries */ 
    } 
}

來源

2014-02-13 14:35:54 dward

響應式設計的CSS問題

回答

相關問題