我可以使垂直共享图标的垂直列表响应不同的屏幕分辨率吗？ （包括图片） [英] Can I make vertical list of floating sharing icons responsive for different screen resolutions? (pic included)

问题描述

我在我的一个博客上使用addthis。我有一个垂直浮动列表的新选项，addthis按钮的代码看起来像这样：

I'm using addthis on one of my blogs. I have their new option of a vertical floating list, and the code for the addthis buttons looks like this:

<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％。因此，两个屏幕分辨率的结果如下所示：

I have the feedback slide-out button set to top:70%. So the result looks like this in both screen resolutions:

我尝试过的：

我尝试过使用不同类型的东西height：auto; ...但还没有工作。一个问题是，图标是32x32，但我可能会使更小，如果必要。任何人都有一个想法，我如何使这个响应，和/或看起来正确的所有屏幕分辨率下？

I've tried using different types of things like height:auto; ... but nothing has worked yet. The one issue is that the icons are 32x32, but I could probably make 'em smaller, if necessary. Does anybody have an idea of how I can make this so it's responsive, and/or looks proper under all screen resolutions? Any guidance in this regard would be greatly appreciated!

推荐答案

应该谨慎对待这个问题的任何指导一个尺寸的设计适合所有的决议这不是那么简单。然而，让我给你一些指针：

one should take caution from the idea of one size design fits all resolutions it's not that straight forward. however let me give you some pointers:

1. 来设计html / css看起来在多个分辨率上是一样的。两个单位：

1. to design html/css that looks the same on multiple resolutions.. one should use two units:

• pt 同样的尺寸在所有决议..例如，让我们说，你正在设计一个旧的iphone与150ppi和视网膜一个与231ppi ..视网膜显示器上的像素比它在iPhone 3g ..比较小，因此如果你放置一个 5px 的边距，它将在您的不同分辨率目标之间看起来完全不同。但是，如果您设置的边际为3 pts ，那么这是您设置的物理指标（认为它为英寸..任何屏幕上的英寸都是相同的不管分辨率是多少？）然后在这种情况下， pt 确实满足一种尺寸设计适合所有分辨率原理

• pt for anything that is expected to have the same dimension on all resolutions.. ie let's say you are designing it for an old iphone with 150ppi and a retina one with 231ppi.. a pixel on a retina display is much smaller than it's counterpart in an iphone 3g.. and so if you put a margin of 5px, it will look totally different amongst your different resolution targets. However, if you set a margin of 3 pts, then this is a physical metric you are setting (think about it as an inch.. an inch is the same on any screen regardless of resolution right?) then in this case.. a pt does meet the one size design fits all resolutions principle

px 用于不可伸缩的任何内容（即位图）从一个屏幕缩放到另一个..所以你应该使用 px 在这种情况下..（ px 是一个屏幕分辨率特定的测量单位）..但同时你必须使用不同的图像不同的分辨率..所以回来，当我在亚马逊工作我们使用了两个不同的精灵对于 kindle touch 和 kindle paperwhite ，以及不同的 px 一切。 （ px vs pt 的概念是一个非常密集的概念，我建议你阅读更多关于它，它花了一段时间，它吸引我与我）

px for anything that is not scalable (ie a bitmap).. a bitmap is not expected to scale from one screen to another.. so you should use px in this case.. (px is a screen resolution specific unit of measurement).. but at the same time you must use different images for different resolutions.. so back when I worked at amazon we used a two different sprites for the kindle touch and kindle paperwhite, along with different px values for each.. but then we used pt for everything else. (the concept of px vs pt is a pretty dense one. i advise you to read more about it. it took a while for it to sink me with me)

您还可以使用jQuery和css级联（也称为特异性）的混合使用相同的css基址来解决不同的目标。请参阅我的answer 。我们也在亚马逊

you can also use a clever mix of jQuery and css cascading (aka specificity) to use the same css base to address different targets.. please see my answer here.. we also did that at amazon

一件事你可以看看（免责声明：我只读了，但没有经验） css mediatypes ..它允许你使你的css媒体具体（即你的css为掌上电脑将不同于打印）..但我不知道多少这重叠的想法一个尺寸的设计适合所有的决议 ..但我知道，我们认为这个想法在亚马逊，但认为它不足以满足我们不同的决议的需要。

one thing you can look at (disclaimer: i only read about it but have no experience with it) css mediatypes.. it allows you to make your css media specific (ie your css for a handheld will be different than that for print).. but i donno how much this overlaps with the idea of one size design fits all resolutions.. but i do know that we considered this idea at amazon but dismissed it as insufficient to meet our different resolution needs.

祝你好运！

这篇关于我可以使垂直共享图标的垂直列表响应不同的屏幕分辨率吗？ （包括图片）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！