Css 我可以让浮动共享图标的垂直列表响应不同的屏幕分辨率吗？（含图片）

我在我的一个博客上使用addthis。我有一个垂直浮动列表的新选项，addthis按钮的代码如下所示：

<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:0%;
top:15%;width:58px; margin:0 auto">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_facebook_send"></a> 
<a class="addthis_button_tweet" tw:count="none"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"     
g:plusone:annotation="none"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_button_reddit"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a>
</div>

我将反馈滑出按钮设置为顶部：70%。因此，在两种屏幕分辨率下，结果都是这样的：

我所尝试的：

我试过使用不同类型的东西，比如身高：自动。。。但一切都没有起作用。一个问题是图标是32x32，但如果必要的话，我可能会把它们缩小。有没有人知道我该如何制作这样的屏幕，使其具有响应性和/或在所有屏幕分辨率下看起来都合适？非常感谢您在这方面提供的任何指导

下面是一个例子，展示了实现这一目标的一种方法

将工具箱和反馈标签放入容器中：

<div class="container">
    <div class="addthis_toolbox"></div>
    <div class="feedback"></div>
</div>

根据是否要滚动，可以使容器

位置：固定
或
位置：绝对
。祝你好运

编辑：屏幕高度的媒体查询：
Abbood提出了一个很好的媒体问题。下面是一个如何使用的示例：

@media screen and (max-height: 700px) {
    // CSS rules will be applied when the screen is < 700px tall.
}

@媒体屏幕和（最大高度：700px）{
//当屏幕高度<700px时，将应用CSS规则。
}
一种尺寸的设计适合所有分辨率的想法应该谨慎行事
这并不是那么简单。然而，让我给你们一些建议：

要设计在多个分辨率上看起来相同的html/css。。应使用两个单位：


pt
用于所有分辨率上预期具有相同维度的任何内容。。比如说，你正在为一部150ppi的旧iphone和一部231ppi的retina设计这款手机。。视网膜显示器上的像素比iPhone3G上的像素小得多。。因此，如果您将边距设置为5px，那么在不同的分辨率目标中，它将看起来完全不同。但是，如果您将边距设置为3
pts
，则这是您正在设置的物理度量（将其视为一英寸。一英寸在任何屏幕上都是相同的，无论分辨率如何，对吗？）。。
pt
符合
一刀切的设计原则

px
用于任何不可伸缩的东西（如位图）。。位图不能从一个屏幕缩放到另一个屏幕。。因此，在这种情况下，您应该使用
px
。。（
px
是屏幕分辨率特定的测量单位）。。但同时，您必须使用不同分辨率的图像。。因此，当我在亚马逊工作时，我们使用了两种不同的精灵，分别用于kindle touch和kindle paperwhite，以及各自的
px
值。。但后来我们用pt来做其他的事情。（px
vs
pt
的概念非常密集。我建议你多了解它。它花了一段时间才让我明白）

您还可以使用jQuery和css级联的巧妙组合（也称为专用性）来使用相同的css基来处理不同的目标。。请看我的简历。。我们在亚马逊也这样做了

有一件事你可以看一下（免责声明：我只读过，但没有这方面的经验）。。它允许您使您的css媒体特定（即手持设备的css将不同于打印）。。但我不知道这与
一刀切设计适合所有分辨率的思想有多大的重叠。。但我知道，我们在亚马逊考虑过这个想法，但认为它不足以满足我们不同的分辨率需求


祝你好运
 你能把它放在一个容器里吗？如果是这样，您可以设置该容器的
最小高度。。如果你想对你的问题有一个更直接的回答。。你能把它放进JSFIDLE吗？你好，艾伯特。感谢您抽出时间回答！我仍在努力将您的解决方案与dsundy提供的小提琴结合起来。也许这一切我都错了，但我只是觉得我所指的网站。。。在左边有响应问题。。。也许这是整个主题。但我确实读过关于px/pt的东西，我理解。。。。72磅=1英寸。。。我从来不知道。一旦我把一切都弄明白了，我一定会把它标记为已解决！再次感谢您抽出时间，阿伯德！谢谢你，桑迪。。为了得到信息和提琴。我打字的时候在摆弄它。。。呵呵。。我正在阅读“最小高度”和“最大高度”属性，并学习更多如何使用它们。不过我会继续摆弄。。。一旦解决了，我会把它标记为这样。再次感谢你抽出时间，德桑迪！没问题。我刚刚在我的答案中添加了一个媒体查询示例。玩得开心。我可以使用这些媒体查询，让整个网站变得流畅或响应迅速吗？我的意思是，只需将整个样式表包装在一个媒体查询周围，然后使用它，而不是将媒体查询放在任何地方？通常，您有常规样式，然后在样式表的末尾，针对不同断点进行多个媒体查询。这些媒体查询将覆盖您制作的原始样式。是的，abbood，再次感谢您提供的所有信息！这很难理解，但我现在明白了px和pt之间的区别。。。72磅=1英寸。我现在也了解媒体屏幕/媒体打印。。。我现在甚至不确定这个网站是否有问题。。。实际上是响应的，或者如果不是。。。呵呵。。。不过，我肯定会继续努力，并希望很快解决这个问题。再次感谢您的时间和所有的信息，abbood！嗯，是的。。我只是学到了更多关于媒体查询的知识。。。一开始并不容易。在my.css中正确配置媒体查询是可行的。谢谢你的时间！
@media screen and (max-height: 700px) {
    // CSS rules will be applied when the screen is < 700px tall.
}