4

基本的に、このページの効果をコピーする方法を見つけようとしています

https://music.twitter.com/i/chart/popular

ウィンドウのサイズが変更されると、javascript を使用してグリッド タイルのサイズを 200 から 240 ピクセルの間で変更します。

車輪を再発明するリスクを冒して、すでにこれを行っているjavascript/jqueryライブラリはありますか? それは石積み/同位体と同じ線に沿っていますが、私が知る限り、要素のサイズを変更しません。

そうでない場合は、自分でやってみようと思います。理論的にはそれほど複雑に聞こえません...

4

1 に答える 1

2

だから私はサイトを見て、頭のてっぺんから離れました-特にその効果を達成するプラグイン/ライブラリを知りません。jQueryでこの効果を達成するために得られる特定の利点や特定の要件はありますか? そうでない場合は、メディア クエリを利用した css3 レスポンシブ デザイン アプローチを強くお勧めします。

このフィドルをチェックして、少量の html と css だけで何ができたか

.icon {
    background:#ccc;
    float:left;
}

.icon img {
    width:100%;
    height:auto;
}

@media screen and (min-width:960px)  {
    .icon{
        width:20%;
    }
}

@media screen and (min-width:768px) and (max-width:959px) {
    .icon{
        width:25%;
    }
}

@media screen and (min-width:480px) and (max-width:767px) {
    .icon{
        width:33.3%;
    }
}

@media screen and (max-width:479px) {
    .icon{
        width:50%;
    }
}

あなたと同様の問題に固有の私の経験から、メディアクエリは、リソース使用量と作業量の両方を参照して、javascript で同様のアクションを実行するよりも軽量であることが判明しました。

メディア クエリに慣れていない場合 - mozilla 開発者ネットワークのこの記事は、出発点として最適です。

于 2013-06-10T20:11:29.700 に答える