試圖使我的網站響應

我使用下面的CSS代碼。我想要做的是，如果用戶在iPad上，我希望背景圖像爲headerold.jpg或某種方式使當前的headernew.jpg能夠在iPad上正確顯示。目前每一端的一部分被切斷。我已經嘗試了@media查詢，但我無法讓代碼正常工作。任何幫助，將不勝感激。試圖使我的網站響應

感謝羅傑

div.art-header-jpeg 
{ 
position: absolute; 
top: 0; 
left:-50%; 
width: 1344px; 
height: 150px; 
background-image: url('../img/headernew.jpg'); 
@media all and (max-width: 1000px) {background-image: url('../img/headerold.jpg');} 
background-repeat: no-repeat; 
background-position: center center; 
}

來源

2013-09-10 user2751396

我們需要查看完整的@media查詢，以便告訴您它是否有問題。 – DiMono

這可以幫助你。 http://stackoverflow.com/questions/17790751/ipad-specific-code-within-css – larrylampco

你可以做這樣的事情。

CSS：

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0; 
} 

@media screen and (max-width: 1024px) { /* Specific to a particular image (change accordingly*/ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; /* 50% */ 
    } 
}

但是也有不同的方法，包括一個jQuery的方法。你應該檢查一下關於它的討論here。

來源

2013-09-10 20:41:07 fditz

我想讓headernew.jpg在iPad上正常顯示以及其他電腦屏幕，但首先只是iPad。如果我刪除位置：絕對，那麼完整的標題向右移動，只顯示標題的大約50％。有什麼我需要補充像在另一篇文章中提到的像這樣..

<meta name="viewport" content="width=device-width, initial-scale=1">

如果是的話應該放置在哪裏？

我的代碼現在看起來像這樣;

div.art-header-jpeg 
{ 
position: absolute; 
top: 0; 
left:-50%; 
width: 1344px; 
height: 150px; 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
div.art-header-jpeg 
background-image: url('../img/headernew.jpg'); 
} 
background-repeat: no-repeat; 
background-position: center center; 
}

來源

2013-09-10 21:51:07 user2751396

試圖使我的網站響應

回答

相關問題