Fatal编程技术网
  • css/
  • Css 媒体查询未被识别

Css 媒体查询未被识别

css

Css 媒体查询未被识别,css,media-queries,Css,Media Queries,基本上，我正在尝试编写一些响应性强的代码，但我无法让它正常工作。我做错了什么 以下是已删除多余位的页面代码： <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Zinuru Project | Tighe O'Connor</title>

基本上，我正在尝试编写一些响应性强的代码，但我无法让它正常工作。我做错了什么

以下是已删除多余位的页面代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Zinuru Project | Tighe O'Connor</title>

<!-- Site Stylesheet(s) -->
<link rel="stylesheet" type="text/css" href="scripts/zinuru.css" >
<link rel="stylesheet" type="text/css" href="scripts/zinuru-media-queries.css">

<!-- JQuery Stylesheet(s) -->
<link href="scripts/lightbox.css" rel="stylesheet" type="text/css">

</head>

<body id="<%=(rsMainMenu.Fields.Item("menuClass").Value)%>">

<div id="pageWrapper">

<aside>
<!--#include file="includes/aside.asp" -->
</aside>

<article>

<header>
<!--#include file="includes/header.asp" -->
</header>

<nav>
<!--#include file="includes/navbar.asp" -->
</nav>

<figure class="banner_slider">
<% 
While ((rpt_Images__numRows <> 0) AND (NOT rsImages.EOF)) 
%>
<img src="images/<%=(rsImages.Fields.Item("imageName").Value)%>" class="nailthumb-container">
<% 
rpt_Images__index=rpt_Images__index+1
rpt_Images__numRows=rpt_Images__numRows-1
rsImages.MoveNext()
Wend
%>
</figure>

<div id="content"><%=(rsContent.Fields.Item("content").Value)%></div>
</article>

</div>
<!-- /#pageWrapper -->

<!-- JQuery Runtime -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- JQuery Plugins -->
<script src="scripts/jquery.nailthumb.1.1.js" type="text/javascript"></script>
<script src="scripts/lightbox-2.6.min.js" type="text/javascript"></script>
<script src="scripts/cycle.js" type="text/javascript"></script>

<!-- Local Scripts -->
<script type="text/javascript" src="scripts/localscripts.js"></script>

</body>
</html>
这是我的起点媒体查询样式表：

/* CSS crunched with Crunch - http://crunchapp.net/ */
@import "/scripts/html5reset-1.6.1.css";
@import "/scripts/muli.css";
@import "/scripts/painted.css";
/**************************************************************************************
 GENERAL STYLING
**************************************************************************************/
body {
  background-color: #161616;
  font-family: 'MuliRegular';
  color: #616163;
  font-size: 1em;
}
#pageWrapper {
  position: relative;
  top: 35px;
  width: 836px;
  margin: auto;
}
a {
  outline: 0;
  outline: none;
}
#home .home,
#artist .artist,
#installations .installations,
#paintings .paintings,
#reviews .reviews,
#teaching .teaching {
  color: #ffffff;
}
/**************************************************************************************
 HEADER
**************************************************************************************/
header {
  height: 35px;
}
header #logo {
  text-align: right;
}
header #logo #zinuru {
  display: none;
}
header #logo #tighe {
  font-family: 'MuliLight';
  font-variant: small-caps;
  font-size: 1.6em;
  color: #ffffff;
}
/**************************************************************************************
 NAVIGATION BAR
**************************************************************************************/
nav {
  width: 706px;
  height: 40px;
  text-align: center;
}
nav dl {
  padding: 0;
  margin: 0;
  display: inline-block;
  position: relative;
  text-align: left;
}
nav dl a {
  display: block;
  white-space: nowrap;
  text-decoration: none;
  color: #616163;
}
nav dl {
  *display: inline;
}
nav dt {
  height: 35px;
  line-height: 35px;
}
nav dt a:hover {
  color: #ffffff;
}
nav dd {
  position: absolute;
  left: 0;
  margin: 0;
  display: none;
  background: #161616;
  box-shadow: 1px 1px 2px #949494;
  min-width: 190px;
  padding: 0 3px;
  z-index: 1000;
}
nav dd a {
  color: #949494;
  line-height: 25px;
}
nav dl.right dd {
  text-align: right;
  left: auto;
  right: 0;
}
nav dl:hover dd {
  display: block;
}
nav dl dd a:hover {
  color: #ffffff;
}
nav .menuDivider {
  margin: 0 5px;
  color: #FFF;
}
/**************************************************************************************
 ASIDE
**************************************************************************************/
aside {
  width: 130px;
  float: left;
}
aside #zinuru {
  position: fixed;
  margin: 240px 0 0 -195px;
  width: 500px;
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
  font-family: 'painted';
  font-size: 5.5em;
  color: #ffffff;
}
/**************************************************************************************
 ARTICLE
**************************************************************************************/
article {
  margin-left: 130px;
  width: 706px;
  /**************************************************************************************
 PAINTINGS
**************************************************************************************/
}
article p {
  margin-bottom: 10px;
  line-height: 120%;
  text-align: justify;
}
article h1 {
  font-family: 'painted';
  font-size: xx-large;
  color: #ffffff;
  margin: 20px 0 10px;
}
article figure {
  border: #FFF thin solid;
}
article #content {
  margin-top: 15px;
}
article table.paintings {
  width: 706px;
}
article table.paintings tr {
  text-align: center;
}
article table.paintings td {
  padding-bottom: 6px;
}
article .paintingsThumbs {
  width: 140px;
  height: 140px;
}
/**************************************************************************************
 THUMBNAIL CONTAINER
**************************************************************************************/
.nailthumb-container {
  width: 706px;
  height: 211.8px;
}

/* CSS crunched with Crunch - http://crunchapp.net/ */
/**************************************************************************************
 SCREEN 320px
**************************************************************************************/
@media only screen and (max-device-width: 320px) {
  #pageWrapper {
    top: 0;
    width: 300px;
    margin: auto;
  }
  header {
    height: 60px;
  }
  header #logo #zinuru {
    display: block;
    line-height: 5px;
  }
  header #logo #tighe {
    font-size: 1em;
  }
  nav {
    display: none;
  }
  aside {
    display: none;
  }
}
希望你能看到我哪里做错了，我需要改变什么

非常感谢。更改：

@media only screen and (max-device-width: 480px) { ... }
致：

这样，您的站点将在移动设备和桌面上做出响应

通过使用
max device width
，只有当物理设备的屏幕宽度小于
X px
时，这些规则才会生效，如果您调整浏览器大小，则不会生效。我把数字改为480px，因为这是iphone屏幕的标准宽度<代码>320px太小

也可使用：

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



初始比例
将移动设备创建的虚拟比例设置为
100%
，因此，您的网站可以正常查看。

您是从桌面查看此内容吗？桌面和Quirktools Screenfly应用程序。不要在CSS中使用
@import
，这样样式表就不能并行加载，这意味着您的网站加载时间更长（与您的问题无关，这似乎由@agconti正确回答）@在这种情况下，最好为每个视口创建一个单独的样式表，而不是一个文件？@martymartypants不一定-这取决于媒体之间的更改量-但无论如何不要使用
@import
（用户
） 
<meta name="viewport" content="width=device-width, initial-scale=1">