0

モバイル用にウェブサイトを再設計していて、アイコンが少し大きすぎることに気づきました。標準の16x16アイコンは、小さな画面にはあまり理想的ではありません。他のサイト、つまりfacebookの通知アイコン、gmailの作成/検索/更新アイコンなどを見ると...少なくとも私の携帯電話では12 x 12のようです（Galaxy Nexus ...は2倍のピクセル密度なので、本当に24x24ですが、私は逸脱します）。

1つは、これらのアイコンのサイズが12 x 12であると言っているのは正しいですか？16 x 16がデスクトップWebサイトのアイコンの「標準」である場合、12 x 12はモバイルWebサイトのアイコンの「標準」になりますか？

また、アイコンを縮小するという観点から...ベクターソフトウェアのように作成されたかなり単純なアイコンであるアイコンを取得し、ベクターソフトウェアを使用して.svgファイルを縮小してから.pngとして再保存することをお勧めしますか？または、CSSを使用してアイコンを縮小した場合、これらのアイコンは整合性を維持しますか？

ベストプラクティスは何ですか？

どんな助けでも大歓迎です。ありがとう！

4

2 に答える 2

3

CSSメディアクエリは間違いなく進むべき道です：

#icon {
    backround:url(../images/sprites.png);
    background-position:0 0;
    height:20px;
    width:20px;}
//desktop
@media only screen and (min-width: 960px)  and (max-width: 1140px){

    body { min-width:960px; }

    #icon {
        background-position:-20px 0;
        height:15px;
        width:15px;}

}

//tablets
@media only screen and (min-width: 768px) and (max-width: 959px) {

    body { min-width:768px; }

    #icon {
        background-position:-32px 0px;
        height:12px;
        width:12px;}

}

//mobile
@media only screen and (min-width: 480px) and (max-width: 767px) {

    body { min-width:480px; }

    #icon {
        background-position:-50px 0px;
        height:10px;
        width:10px;
}

再描画するたびに、ブラウザはこれらのルールをテストし、必要に応じてそれらを置き換えます。上記の例では、＃iconには1つの一貫したプロパティ（背景）があり、ブラウザのサイズが変わるといくつかのプロパティが変わります。

すぐに使える優れたソリューションについては、 1040GridまたはSkeletoncssフレームワークを確認してください。または、自分でロールします。

メディアクエリはcss3機能であり、古いブラウザでは失敗することに注意してください。この場合、デフォルトのルールセット（通常は960レイアウトの場合）が使用されます。（この問題を処理するjavascriptソリューションもいくつかあります。）

乾杯

于 2012-05-23T18:35:54.560 に答える
3

ベストプラクティスは、特別な小さなアイコンをデザインすることです。ベクターアイコンから高品質の画像を自動的に取得することは不可能です。

于 2012-10-07T19:49:17.817 に答える