我在我的一个博客上使用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,但如果有必要,我可能会让它们更小。有没有人知道我怎么能做到这一点所以它的响应速度,和/或在所有屏幕分辨率下看起来都合适?在这方面的任何指导都将非常赞赏!
答案 0 :(得分:2)
人们应该谨慎对待one size design fits all resolutions
这不是那么直截了当的想法。但是,让我给你一些指示:
设计在多个分辨率上看起来相同的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
的想法重叠多少但我确实知道我们在亚马逊考虑过这个想法,但认为它不足以满足我们不同的分辨率需求。
答案 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: fixed
或position: absolute
。祝你好运!
Abbood对媒体查询提出了一个很好的观点。这是一个如何使用它的例子:
@media screen and (max-height: 700px) {
// CSS rules will be applied when the screen is < 700px tall.
}