3

デスクトップには大きなロゴを表示し、スマートフォンなどの小さなデバイスには小さな画像を表示するようにロゴを設定しようとしています...

これは私が今まで試したことですが、うまくいきません。

誰か助けてくれませんか？コードの何が問題になっていますか?

<html>
<head>
<script type="text/javascript">
function load(){
    document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
    if ($(window).width() < 1024) {// code for small viewports
        return "http://i.imgur.com/ozYV740.png"; // small logo
    } 
    else {// code for large viewports
        return "http://i.imgur.com/RMV6Af0.png"; //big logo
    }
}
</script>
</head>
<body onload="load()">
    <img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
4

3 に答える 3

3

Web ページがさまざまなデバイスでどのように表示されるかを処理するには、CSS メディア クエリを使用する必要があります。これらのクエリを使用すると、ユーザーの画面の幅に応じてさまざまなスタイルを適用できます。

たとえば、電話のロゴのサイズを変更するには、次のことを試してください。

/* Desktops (>480px) */
#logo {
  width: 200px;
  height: 200px;
}

/* iPhone landscape (480px) */
@media screen and (max-width: 480px) {
  #logo {
    width: 100px;
    height: 100px;
  }
}

チュートリアル: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

于 2013-09-04T15:58:46.457 に答える
2

メディアクエリを使ってみる

<head>
     <style>
          .logo {
                width: //logo-width
                height : //logo-height
                background-image : url('http://i.imgur.com/RMV6Af0.png');
           }

           @media only screen 
           and (max-device-width : 1024px) {
                .logo {
                    width: //logo-width
                    height : //logo-height
                    background-image : url('http://i.imgur.com/ozYV740.png');
                }
           }
     </style>
</head>
<body>
<div class="logo">
</div>
</body>
于 2013-09-04T16:02:06.790 に答える
1

あなたが使用していないためjquery、あなたのケースでこれを試してください：

JS で作業するには:

if (window.innerWidth < 1024) {// code for small viewports
    //^^^^^^^^^^^

jquery を使用する場合:

function displaylogo() {
    if ($(window).width() < 1024) {
        $("#logo").attr("src","http://i.imgur.com/ozYV740.png"); // small logo
    } 
    else {
        $("#logo").attr("src","http://i.imgur.com/RMV6Af0.png"); //big logo
    } 
}

$(window).resize(function () {
    displaylogo();
});
$(document).ready(function () {
    displaylogo();
});

代わりに使用することをお勧めしますCSS：

<span id="logo"></span>

CSS:

#logo {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
@media screen and (min-width: 1024px) {
    #logo {
        width: 100px;
        height: 100px;
        background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
    }
}
于 2013-09-04T15:49:31.950 に答える