@media只有屏幕不起作用

我必須優化移動設備的網站。試圖通過@media唯一的屏幕做到這一點，但它並沒有爲我工作。也許有人知道如何正確地把它放在代碼中？@media只有屏幕不起作用

body { 
 
    background-color: black; 
 
    background-image: url(../images/background.jpg); 
 
    background-size: 100vw 100vh; 
 
} 
 
header { 
 
    box-sizing: border-box; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 100vw; 
 
    height: 15vh; 
 
    border-top: 0.5vmin ridge gray; 
 
    border-right: 0.5vmin ridge gray; 
 
    border-left: 0.5vmin ridge gray; 
 
} 
 
header img { 
 
    max-height: 14vmin; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    vertical-align: center; 
 
} 
 
etc.

<!DOCTYPE html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <link type="text/css" rel="stylesheet" href="css/homepage.css"> 
 
    <meta http-equiv="Content-type" content="text/html;charset=utf-8" /> 
 
    <title>Airinn hotel // Home</title> 
 
</head> 
 

 
<body> 
 

 
    <header> 
 
    <img src='images/logo.png' />etc.

來源

2015-10-29 Artjom

你的'@ media'在哪裏？ –

我試圖添加它作爲外部樣式表，並且只是在@ss僅屏幕和（最大寬度：500px）{}「在CSS中，但這兩個選項都沒有工作.. – Artjom

我使用」@media「所有並且在各大平臺和設備上都可以找到它 - 特別是在哪裏看到這個問題？您是否嘗試過使用Chrome中的「檢查元素」來診斷髮生了什麼？ – AndW99

這是怎麼了應該做的（移動第一）閱讀：

.test { 
    width: 200px; 
} 

@media screen and (min-width: 1024px) { 
    .test {  
     width: 1000px; 
    } 
}

演示：http://jsfiddle.net/yzt9zjno/

另外，this tutorial should help。

來源

2015-10-29 14:02:25 IonDen

這很奇怪，但我只能以這種方式添加@media ..由於某種原因，如果我在css頂部添加媒體屏幕和（最小寬度：1024px）{} – Artjom

，則不起作用媒體應該在其他CSS代碼。檢查此演示：http://jsfiddle.net/yzt9zjno/嘗試調整結果窗口。 – IonDen

好的，謝謝！另外，也許你知道如何編寫寬度和長度之間的比較？例如，標準寬度是長度（2：1）的兩倍。如果寬度小於2，@media應該開始工作。 – Artjom

你有沒有嘗試有幾個CSS？第一個，全球（homepage.css）和每種支持一個？

<link type="text/css" rel="stylesheet" href="css/homepage.css" /> 
<!-- Now for "normal" screens" --> 
<link type="text/css" rel="stylesheet" href="css/screen.css" media="screen" /> 
<!-- And for mobiles/small screens --> 
<link type="text/css" rel="stylesheet" href="css/small.css" media="handheld" />

的@media不需要「唯一」，將僅通過匹配媒體

來源

2015-10-29 14:01:54 CrazyCat

如果homepage.css應該用於普通屏幕，那麼爲「普通」屏幕添加什麼點？問題是當我的導航欄崩潰時，屏幕的寬度變得比高度低2：1，我只需要修復這個問題 – Artjom

對不起，我沒有完全理解你的麻煩。忘記我的參與。 – CrazyCat

@media只有屏幕不起作用

回答

相關問題