2017-02-01 92 views
1

我有一個背景圖像的div ..我需要給大屏幕div邊緣,並刪除其他屏幕的邊緣。 但我在瀏覽器中檢查時發現媒體查詢中的代碼不可讀。CSS3媒體查詢不可訪問

<div class="logo FLRight FLNone-xs"> 
<div> 

這個代碼是在CSS文件可讀沒有任何meadia

.header .nav-container .logo{ 
    background: url(../images/logo.png) no-repeat; 
    width: 160px; 
    height: 80px; 
    margin-bottom: 0px; 
} 

和該代碼無法讀取在瀏覽器...這只是一個簡單的例子..的情況下被施加在我的文件中的所有類

@media (min-width: 1200px) { /*large screens*/ 

    .header .nav-container .logo{ 
     margin-bottom: 20px; 
     } 
    } 
+0

我在頂部的例子中讀了3個類。哪一個? – scoopzilla

+0

您正在使用哪種瀏覽器,還是跨瀏覽器問題? – neophyte

+0

@scoopzilla .logo類...但問題不是關於類..任何類將面臨同一問題 –

回答

0

.logo{ 
 
    background: url('http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_01.png') no-repeat; 
 
    width: 160px; 
 
    height: 80px; 
 
    margin-bottom: 0px; 
 

 
} 
 
@media (min-width: 1200px) { /*large screens*/ 
 

 
    .logo{ 
 
     margin-bottom: 20px; 
 
     } 
 
    }
<!doctype html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <div class="logo FLRight FLNone-xs"> 
 
    <h1>hiiii</h1> 
 
<div> 
 
</body> 
 
    </html>

@media中刪除關聯的類。 請參閱上述代碼以供參考。 希望這有助於!