未檢測到媒體屏幕？

我有一個樣式表，出於某種原因，我的媒體查詢沒有被檢測到。當我調整我的瀏覽器和Inspect Element時，我仍然看到1060px .container。未檢測到媒體屏幕？

這裏的樣式表

.container { 
    margin: 0 auto;  
    width: 1060px; 
} 


.container .section { 
    margin-top:40px; 
    width:320px; 
    margin-left:20px; 
    float:left; 
    height:480px; 
    position:relative; 

} 



/* Smartphones (portrait and landscape) */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

    .container { 
     padding-left:2%; 
     margin: 0 auto; 
     width: 96%; 
    } 

    .container .section { 
     width:96%; 
     display:block; 
     position:relative; 

    } 
}

來源

2014-03-12 guest

如果您希望它在非移動設備上可見，請使用'min-width'而不是'min-device-width'。另外，確保你有一個視口集http://stackoverflow.com/questions/20874043/my-media-queries-arent-compatible-with-mobile-devices/20874068#20874068 –

謝謝。我能夠使這個簡單的改變工作！ – guest

只定義智能手機的媒體查詢的一部分。在這個媒體之外查詢CSS，你必須通過這種方式來定義CSS以獲得更大的尺寸。

/* 1080 HD */ 
@media screen and (max-width: 2048px) { 
    .container { 
     margin: 0 auto;  
     width: 1060px; 
    } 


    .container .section { 
     margin-top:40px; 
     width:320px; 
     margin-left:20px; 
     float:left; 
     height:480px; 
     position:relative; 
    } 
} 

/* Smartphones (portrait and landscape) */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

.container { 
    padding-left:2%; 
    margin: 0 auto; 
    width: 96%; 
} 

.container .section { 
    width:96%; 
    display:block; 
    position:relative; 

} 
}

並在網頁文件的元素中添加以下元標記。

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

上面一行指向一個媒體查詢視口，所以它沒有找到外部定義的CSS。

來源

2014-03-12 05:08:02

未檢測到媒體屏幕？

回答

相關問題