1

我在我的一个博客上使用 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>

我将反馈滑出按钮设置为 top:70%。所以结果在两种屏幕分辨率下都是这样的：

重叠的图标

我试过的：

我尝试过使用不同类型的东西，比如 height:auto; ...但还没有任何效果。一个问题是图标是 32x32，但如果有必要，我可以将它们缩小。有没有人知道我如何才能做到这一点，以便它具有响应性和/或在所有屏幕分辨率下看起来都合适？在这方面的任何指导将不胜感激！

4

2 回答 2

2

人们应该谨慎对待one size design fits all resolutions它并不是那么直截了当的想法。但是，让我给你一些指示：

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

    • pt对于任何预期在所有分辨率上都具有相同尺寸的东西..即假设您正在为具有 150ppi 的旧 iPhone 和具有 231ppi 的视网膜设计它.. 视网膜显示器上的像素比它的对应物小得多iphone 3g .. 所以如果你把边距设置为5px，它会在你不同的分辨率目标中看起来完全不同。但是，如果您将边距设置为 3 pts，那么这是您正在设置的物理指标（将其视为一英寸......无论分辨率如何，任何屏幕上的一英寸都是相同的，对吧？）那么在这种情况下pt......符合one size design fits all resolutions原则

    • px对于任何不可缩放的东西（即位图）.. 位图不应该从一个屏幕缩放到另一个屏幕.. 所以你应该px在这种情况下使用.. （px是屏幕分辨率特定的测量单位）.. 但在同时你必须为不同的分辨率使用不同的图像。所以当我在亚马逊工作时，我们为kindle touch和kindle paperwhite使用了两个不同的精灵，每个精灵都有不同px的值。但后来我们用 pt 来做其他的一切. （pxvs的概念pt是一个非常密集的概念。我建议你阅读更多关于它的内容。它花了一段时间才让我和我一起沉沦）

    • 您还可以使用 jQuery 和 css 级联（又名特异性）的巧妙组合来使用相同的 css 基础来解决不同的目标。请在此处查看我的答案。我们也在亚马逊这样做

    • 您可以查看的一件事（免责声明：我只阅读过它但没有经验）css mediatypes .. 它允许您使您的 css 媒体特定（即手持设备的 css 与打印的 css 不同）。 .但我不知道这与..的想法有多少重叠，one size design fits all resolutions但我知道我们在亚马逊考虑过这个想法，但认为它不足以满足我们不同的分辨率需求。

祝你好运！

于 2013-02-16T08:38:14.340 回答
1

这是一个JSFiddle，它展示了实现此目的的一种方法。

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

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

然后使用CSS：

.container {
    height: 100%;
    left: 0;
    min-height: 600px;
    position: fixed;
    top: 0;
    width: 50px
}

.addthis_toolbox {
    position: absolute;
    top: 15%;
    width: 40px;
}

.feedback {
    position: absolute;
    top: 70%;
}

根据您是否希望它滚动，您可以制作容器position: fixed或position: absolute. 祝你好运！

编辑：屏幕高度的媒体查询：

Abbood 在媒体查询方面提出了一个很好的观点。这是一个如何使用的示例：

@media screen and (max-height: 700px) {
    // CSS rules will be applied when the screen is < 700px tall.
}
于 2013-02-16T03:46:42.603 回答