css - 媒体查询未被识别-6ren

css - 媒体查询未被识别

转载作者：太空宇宙更新时间：2023-11-04 03:52:49

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

这是删除了多余位的页面代码:

<!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) { ... }

到:

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

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

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

也可以使用:

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

initial-scale 将移动设备创建的虚拟比例设置为 100%，以便正确查看您的网站。

关于css - 媒体查询未被识别，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23199775/

文章推荐： html - 如何使用CSS修复响应式下拉菜单？

文章推荐： linux - 如何获取已安装应用程序的完整 pkg 列表(debian)？

文章推荐： python - Django 导入导出 : Documentation cannot be understood

文章推荐： linux - 找出导致应用程序内存泄漏的原因

windows - gcc 可被 cmd 识别，但不能被 bash 识别
我使用的是linux的windows子系统，安装了ubuntu，bash运行流畅。我正在尝试使用make，似乎bash 无法识别gcc。尝试将其添加到 PATH，但没有任何改变。奇怪的是 - cmd
installation - Imagick 被 WAMPServer 识别，但不被 PHP 识别
ImageMagick 已正确安装。 WAMP 的“PHP 扩展”菜单也显示带有勾选的 php_imagick。除了 Apache 和系统环境变量外，phpinfo() 没有显示任何 imagick
deterministic - 如果一种语言 (L) 被 n 状态 NFA 识别，它是否也能被状态不超过 2^n 的 DFA 识别？
我是这么想的，因为上限是 2^n，并且考虑到它们都是有限机，n 状态 NFA 和具有 2^n 或更少状态的 DFA 的交集将是有效。我错了吗？最佳答案你是对的。 2^n 是一个上限，因此生成的
r - 识别/描述向量中具有特定值的连续几天的序列
我有一个大型数据集，其中包含每日值，指示一年中的特定一天是否特别热(用 1 或 0 表示)。我的目标是识别 3 个或更多特别炎热的日子的序列，并创建一个包含每个日子的长度以及开始和结束日期的新数据集。
识别 R 向量中的特定元素顺序模式
我有一个向量列表，每个向量看起来像这样 c("Japan", "USA", "country", "Japan", "source", "country", "UK", "source", "coun
c - 识别/防止静态缓冲区溢出的工具和方法
是否有任何工具或方法可以识别静态定义数组中的缓冲区溢出(即 char[1234] 而不是 malloc(1234))？昨天我花了大部分时间来追踪崩溃和奇怪的行为，最终证明是由以下行引起的: // e
python - 手动创建的snakemake通配符未使用/识别
我一直在尝试通过导入制表符分隔的文件来手动创建 Snakemake 通配符，如下所示: dataset sample species frr PRJNA493818_GSE120639_SRP1628
python - 手动创建的snakemake通配符未使用/识别
我一直在尝试通过导入制表符分隔的文件来手动创建 Snakemake 通配符，如下所示: dataset sample species frr PRJNA493818_GSE120639_SRP1628
c# - 人声识别/识别
我想录下某人的声音，然后根据我获得的关于他/她声音的信息，如果那个人再次说话，我就能认出来!问题是我没有关于哪些统计数据(如频率)导致人声差异的信息，如果有人可以帮助我如何识别某人的声音？在研究过程
c++ - 识别 “Enter”
我希望我的程序能够识别用户何时按下“enter”并继续循环播放。但是我不知道如何使程序识别“输入”。尝试了两种方法: string enter; string ent = "\n"; dice d1;
识别 Bash 脚本中文件扩展名的正则表达式模式对于捕获压缩文件不准确
我创建了这个带有一个参数(文件名)的 Bash 小脚本，该脚本应该根据文件的扩展名做出响应: #!/bin/bash fileFormat=${1} if [[ ${fileFormat} =~ [F
ios - 识别 subview
我正在寻找一种在 for 循环内迭代时识别 subview 对象的方法，我基本上通过执行 cell.contentView.subviews 从 UITableView 的 contentView 获
Swift CallKit 识别
我正在尝试在 Swift 中使用 CallKit 来识别调用者。我正在寻找一种通过发出 URL 请求来识别调用者的方法。例如:+1-234-45-241 给我打电话，我希望它向 mydomain.
javascript - 厚盒插件 - 识别
我将(相当古老的)插件称为“thickbox”，如下所述: 创建厚盒时，它包含基于查询的内容列表。使用 JavaScript 或 jQuery，我希望能够访问 type 的值(在上面的示例中 t
c++ - 识别/生成波形？
我想编写一些可以接受某种输入并将其识别为方波、三角波或某种波形的代码。我还需要一些产生所述波的方法。我确实有使用 C/C++ 的经验，但是，我不确定我将如何模拟所有这些。最终，我想将其转换为微 Co
C# 识别 for 循环中的项目
我创建了一个 for 循环，用于在每个部分显示 8 个项目，但我试图在循环中识别某些项目。例如，我想识别前两项，然后是第五项和第六项，但我的识别技术似乎是正确的。 for (int i = 0; i
ios - 识别 UIStoryboard
如何识别 UIStoryboard？该类具有创建和实例化的方法，但我没有看到带有类似name 的@property。例如获取 Storyboard对象 + storyboardWithName:b
识别 MSSQL 各个版本的版本号的方法
如何确定所运行的SQLServer2005的版本要确定所运行的SQLServer2005的版本，请使用SQLServerManagementStudio连接到SQLServer2005，然后运行
javascript - 识别 Javascript 中的函数名称或属性
这个问题在这里已经有了答案: How to check whether an object is a date? (26 个答案) 关闭2 年前。我正在使用一个 npm 模块，它在错误时抛出一个空
android - 后台 Activity 识别
我正在制作一个使用 ActivityRecognition API 在后台跟踪用户 Activity 的应用，如果用户在指定时间段(例如 1 小时)内停留在同一个地方，系统就会推送通知告诉用户去散步.

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 媒体查询未被识别