我可以根据不同的屏幕分辨率制作浮动共享图标的垂直列表吗? (包括照片)

时间:2013-02-16 02:24:53

标签: css css3

我在我的一个博客上使用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%。所以在两种屏幕分辨率下结果都是这样的:

Overlapping iconds

我尝试了什么:

我尝试过使用不同类型的东西,比如身高:自动; ......但还没有任何工作。一个问题是图标是32x32,但如果有必要,我可能会让它们更小。有没有人知道我怎么能做到这一点所以它的响应速度,和/或在所有屏幕分辨率下看起来都合适?在这方面的任何指导都将非常赞赏!

2 个答案:

答案 0 :(得分: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值...但是之后我们使用了其他一切。 (px vs pt的概念非常密集。我建议你read更多关于它的事情。它需要一段时间才能让我沉沦于我身边。

    • 你也可以巧妙地使用jQuery和css级联(又称特异性)来使用相同的css基地来处理不同的目标..请在这里查看我的answer ..我们也是在亚马逊

    • 你可以看一件事(免责声明:我只读过它但没有经验)css mediatypes ..它可以让你的css媒体具体化(即你的手持设备的CSS)将不同于印刷品...但我不知道这与one size design fits all resolutions的想法重叠多少但我确实知道我们在亚马逊考虑过这个想法,但认为它不足以满足我们不同的分辨率需求。

  2. 祝你好运!

答案 1 :(得分: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: fixedposition: absolute。祝你好运!

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

Abbood对媒体查询提出了一个很好的观点。这是一个如何使用它的例子:

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