如何根據瀏覽器尺寸縮放填充

Question

對於移動瀏覽我的網站，我決定只顯示社交媒體圖標。我希望獲得類似於使用手機和選擇應用程序的體驗。

我的目標是在縱向觀看時將其保持在4個圖標寬，在橫向觀看時將其保持在6個圖標寬。圖標是64x64像素，我不想擴展它們。使用8的圖像填充和4個圖標，總共出現320px，這是我希望允許的最小觀看次數。

我知道24個圖標打破了較小手機的體驗。我將不得不提供滑動瀏覽到下一頁應用程序的功能，但這是另一個問題。

我需要CSS幫助，確保至少4個圖標在移動設備上最多顯示爲768px，但寬度不超過6。填充應該至少爲8px，但隨着屏幕變大而變大。我怎樣才能做到這一點？

HTML

<div class="screen"> 

    <div class="app"><a href="http://amazon.com" title="amazon"><img src="icons/amazon.png" alt="amazon"></a></div> 
    <div class="app"><a href="http://dropbox.com" title="dropbox"><img src="icons/dropbox.png" alt="dropbox"></a></div> 
    <div class="app"><a href="http://ebay.com" title="ebay"><img src="icons/ebay.png" alt="ebay"></a></div> 
    <div class="app"><a href="http://" title="email"><img src="icons/email.png" alt="email"></a></div> 
    <div class="app clear4"><a href="http://" title="evernote"><img src="icons/evernote.png" alt="evernote"></a></div> 
    <div class="app"><a href="http://" title="facebook"><img src="icons/facebook.png"></a></div> 
    <div class="app clear6"><a href="http://" title="foursquare"><img src="icons/foursquare.png"></a></div> 
    <div class="app"><a href="http://" title="friendfeed"><img src="icons/friendfeed.png"></a></div> 
    <div class="app clear4"><a href="http://" title="github"><img src="icons/github.png"></a></div> 
    <div class="app"><a href="http://" title="googleplus"><img src="icons/googleplus.png"></a></div> 
    <div class="app"><a href="http://" title="instagram"><img src="icons/instagram.png"></a></div> 
    <div class="app"><a href="http://" title="linkedin"><img src="icons/linkedin.png"></a></div> 
    <div class="app clear4"><a href="http://" title="paypal"><img src="icons/paypal.png"></a></div> 
    <div class="app"><a href="http://" title="pinterest"><img src="icons/pinterest.png"></a></div> 
    <div class="app clear6"><a href="http://" title="skype"><img src="icons/skype.png"></a></div> 
    <div class="app"><a href="http://" title="stackoverflow"><img src="icons/stackoverflow.png"></a></div> 
    <div class="app clear4"><a href="http://" title="stumleupon"><img src="icons/stumbleupon.png"></a></div> 
    <div class="app"><a href="http://" title="tumblr"><img src="icons/tumblr.png"></a></div> 
    <div class="app clear6"><a href="http://" title="twitter"><img src="icons/twitter.png"></a></div> 
    <div class="app"><a href="http://" title="vimeo"><img src="icons/vimeo.png"></a></div> 
    <div class="app clear4"><a href="http://" title="vine"><img src="icons/vine.png"></a></div> 
    <div class="app"><a href="http://" title="wordpress"><img src="icons/wordpress.png"></a></div> 
    <div class="app"><a href="http://" title="yelp"><img src="icons/yelp.png" alt="yelp"></a></div> 
    <div class="app"><a href="http://" title="youtube"><img src="icons/youtube-2.png" alt="youtube"></a></div> 

    </div><!-- .apps --> 

CSS

@media screen and (max-width: 319px) { 
    /* display notice */ 
} 

@media screen and (min-width: 320px) and (max-width: 768px) { 

    .screen img { 
    float: left; 
    min-padding: 8px; 
    } 

    .clear4 { 
    clear: both; 
    } 

} 

@media screen and (min-width: 769px) { 

    /* show other content */ 

    /* max 6 cols, 4 rows */ 
} 

這裏是在肖像模式下的圖標（沒有填充）的圖像進行了解。

編輯：所以，我是能夠找出基於方向的4個6列。現在我需要幫助縮放填充。

Answer 1

要做到這一點，最好的方法是與固有劑量檢查Here is a basic template I made up，這是你應該/將需要編輯，雖然因爲我沒有你的項目文件。

如果您需要更多幫助，請告訴我。

編輯：我忘了你需要10代表更多然後2鏈接，所以只需用這個/ e4vyu4vb/1 /替換jsfiddle鏈接，以查看您的項目的版本。

代碼如果您不能訪問的jsfiddle 模板：（一沒有你的代碼） CSS

.intrinsictive-ration { 
    position: relative; 
    padding-bottom: 20%; 
    height: 0; 
} 
    .elements-you-need-stretched { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: grey; /* you will need to adjust this to your liking */ 
} 

HTML

<div class="intrinsictive-ration"> 
<!-- this it the main div --> 
    <div class="elements-you-need-stretched"></div> 
</div> 
<!-- ending of the main div --> 

Answer 2

所以基本上你想要的分辨率是在該determinining因素填充的縮放？如果是這種情況，我想不出任何可能的方式來這樣做以外的PHP或可能是JS