@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只有屏幕不起作用

回答

相关问题