1

私は自分のブログの 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; のようなさまざまな種類のものを使用してみました。...しかし、まだ何も機能していません。1 つの問題は、アイコンが 32x32 であることですが、必要に応じてアイコンを小さくすることもできます。これをレスポンシブにする方法、および/またはすべての画面解像度で適切に見えるようにする方法を知っている人はいますか? この点に関するガイダンスをいただければ幸いです。

4

2 に答える 2

2

one size design fits all resolutionsそれほど単純ではないという考えから注意する必要があります。ただし、いくつかの指針を示しましょう。

  1. 複数の解像度で同じように見える html/css を設計するには、次の 2 つのユニットを使用する必要があります。

    • ptすべての解像度で同じ寸法を持つことが期待されるもの..つまり、150ppiの古いiPhoneと231ppiのRetina用に設計しているとしましょう..Retinaディスプレイのピクセルは、 iphone 3g .. のマージンを入れると5px、異なる解像度ターゲット間でまったく異なって見えます。ただし、マージンを 3 に設定するptsと、これは設定している物理的なメトリックになります (インチと考えてください。1 インチは、解像度に関係なく、どの画面でも同じですよね?) この場合、.. aptはone size design fits all resolutions原則を満たす

    • pxスケーラブルではないもの (つまり、ビットマップ).. ビットマップは、ある画面から別の画面にスケーリングすることは想定されていません.. したがってpx、この場合は使用する必要があります.. (pxは画面解像度固有の測定単位です).. しかし同時に、解像度ごとに異なる画像を使用する必要があります..私がアマゾンで働いていたとき、 kindle touchとkindle paperwhiteに2つの異なるスプライトを使用し、それぞれに異なるpx値を使用しました..しかし、他のすべてにptを使用しました. . ( pxvsの概念は非常に複雑なものです。詳細を読むptことをお勧めします。理解するのに時間がかかりました)

    • jQuery と css カスケード (別名、特異性) を巧妙に組み合わせて、同じcssベースを使用して異なるターゲットに対処することもできます。ここで私の回答を参照してください。

    • あなたが見ることができる1つのこと（免責事項：私はそれについて読んだだけで、経験はありません）css mediatypes .. cssメディアを特定することができます（つまり、ハンドヘルドのcssは印刷用のcssとは異なります）。 . しかし、これが .. のアイデアとどの程度重複するかone size design fits all resolutionsはわかりませんが、Amazon でこのアイデアを検討したが、さまざまな解像度のニーズを満たすには不十分であるとして却下したことは知っています。

幸運を！

于 2013-02-16T08:38:14.340 に答える
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.
}
于 2013-02-16T03:46:42.603 に答える