背景圖片，手機和媒體查詢

我試圖使其更加符合手機。我有無法正確調整大小的背景圖片。我試過媒體查詢，不知道爲什麼它不起作用。我的代碼如果在下面;背景圖片，手機和媒體查詢

.container3{ 
 
    display: flex; 
 
    align-items: center; 
 
    background-size: cover; 
 
    height: 700px; 
 
    text-shadow: 0.25px 0.25px 0.25px #000000; 
 
    background-image: url('Images/homepage.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 

 
@media all and (max-width:480px)and(min-width:0px) { 
 
    .container3 { 
 
    width: 100%; 
 
    background-image: url('Images/homepage.jpg'); 
 
    } 
 
}

<html> \t 
 
    <title>Unity</title> 
 
    <link href="Style.css" rel="stylesheet"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
    <meta name="viewport" content="width=500, initial-scale=1"> 
 
    <body> 
 

 
    <div class="container3"> 
 
     <div class="title"> 
 
     <h1> 
 
      bringing people together 
 
     </h1> 
 
     <p>free advertising space</p> 
 

 
     </div> \t 
 
    </div> 
 

 

 
    </body> 
 
</html>

來源

2016-09-06 Allan W MacLeod

你可以檢查http://www.w3schools.com/css/css_rwd_images.asp或嘗試使用最大寬度，而不是寬度 – John120

我們不能幫助，因爲你的示例代碼被打破了。對於丟失的圖像使用服務像http://placehold.it –

.container3{ 
 
    display: flex; 
 
    align-items: center; 
 
    background-size: cover; 
 
    height: 700px; 
 
    text-shadow: 0.25px 0.25px 0.25px #000000; 
 
    background-image: url('Images/homepage.jpg'); 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
} 
 

 
@media all and (max-width:888px) { 
 
    .container3 { 
 
    width: 100%; 
 
    background-image: url('http://feelgrafix.com/data/background/background-17.jpg'); 
 
    } 
 
}

<html> \t 
 
    <title>Unity</title> 
 
    <link href="Style.css" rel="stylesheet"/> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
    <meta name="viewport" content="width=500, initial-scale=1"> 
 
    <body> 
 

 
    <div class="container3"> 
 
     <div class="title"> 
 
     <h1> 
 
      bringing people together 
 
     </h1> 
 
     <p>free advertising space</p> 
 

 
     </div> \t 
 
    </div> 
 

 

 
    </body> 
 
</html>

它不工作，因爲語法是不對的，你應該在@media all and (max-width:480px)and(min-width:0px)使用空格。像這樣：@media all and (max-width:480px) and (min-width:0px)也，它是多餘的，因爲設備將始終有超過0像素寬度，這樣你就可以刪除第二部分。

我以前max-width:888px所以你可以看到在片段中的樣本IMG。

來源

2016-09-06 12:54:39

非常感謝您的輸入你讓我重新啓動和運行！非常感謝！ :) –

背景圖片，手機和媒體查詢

回答

相關問題