如何根据浏览器维度缩放填充

Question

对于我的网站的移动查看，我决定只显示社交媒体图标。我想体验类似于使用手机和选择应用程序的体验。

我的目标是在纵向观看时保持4个图标宽，在横向观看时保持6个图标宽。图标是64x64像素，我不想缩放它们。图像填充为8，并且有4个图标，总计320px，这是我想要的最小视图。

我知道24个图标打破了小手机的体验。我必须提供滑动才能进入下一页应用程序的能力，但这是另一个问题。

我需要CSS帮助确保至少4个图标显示为宽，但​​在移动设备上最多不超过6个，最高为768px。填充应至少为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

所以基本上你希望分辨率成为填充缩放的决定因素吗？如果是这种情况，我想不出任何可能的方法在PHP或JS之外这样做