html - 如何根据浏览器尺寸缩放填充

Question

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

我的目标是在纵向查看时保持 4 个图标宽，在横向查看时保持 6 个图标宽。图标是 64x64 像素，我不想缩放它们。图像填充为 8，跨度为 4 个图标，总计 320 像素，这是我希望允许的最小 View 。

我知道 24 个图标会破坏较小手机的体验。我必须提供滑动以进入应用的下一页的功能，但这是另一个问题。

我需要 CSS 方面的帮助，以确保至少 4 个图标显示得较宽，但在最大 768 像素的移动设备上不超过 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 个以上的链接，因此只需将 jsfiddle 链接替换为此/e4vyu4vb/1/即可查看您元素的版本。

代码，如果你不能访问 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 -->