@MediaQuery 在 CSS 中调用
Posted
技术标签:
【中文标题】@MediaQuery 在 CSS 中调用【英文标题】：@MediaQuery Call In CSS 【发布时间】：2012-11-02 17:32:36 【问题描述】：我一直在调整网站以使其更具响应性，并且我一直在关注发送给我的演示中的代码。
但是由于某种原因，它似乎没有像移动浏览器中所说的那样调整大小。
我认为这是因为 Wordpress 调用样式表的方式略有不同，我是否需要某种形式的插件来做到这一点？
请参阅我的文档下面的标题引用了另一个样式表，但是当浏览器不同时它似乎没有调用它（但是它在不同的分辨率下有效地调整大小）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) ?> » Blog Archive <?php ?> <?php wp_title(); ?></title>
<meta name="keywords" content="Holiday, free CSS template, clean, neat, aqua, white, templatemo" />
<meta name="description" content="Holiday is a clean and neat free CSS template using aqua and white colors." />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<!-- Include jQuery -->
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<!-- Include the Nivo Slider CSS file -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); >/scripts/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<!-- Include the Nivo Slider JS file -->
<script src="<?php bloginfo("template_url"); ?>/scripts/nivoslider/jquery.nivo.slider.js" type="text/javascript"></script>
<!-- Set up the Nivo Slider -->
<script type="text/javascript">
jQuery(window).load(function()
jQuery('#slider').nivoSlider();
);
</script>
<!-- media queries css -->
<link href="media-queries.css" rel="stylesheet" type="text/css">
<!-- html5.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
【问题讨论】：
【参考方案1】：您确定您的media-queries.css 的路径是正确的吗？首先确保 CSS 正在加载，然后我们可以开始讨论实际的媒体查询本身。
如果您的文件位于 themes 文件夹中，那么它将类似于：
/wp-content/themes/media-queries.css
或者：
<link href="<?php bloginfo('template_url'); ?>/media-queries.css"
rel="stylesheet" type="text/css" media="screen" />
【讨论】：
或使用绝对 URL 指向您知道有效的路径，即 【参考方案2】：这可能会比你想要的更多，但让我们从CSS3 Media Query spec开始。
一些不应该有问题的事情，但我会解决： 1. 如果你想让旧版本的 IE 识别新的 HTML5 元素，你只需要谷歌的 html5shim ——从技术上讲，这不应该在 XHTML 中 2. 您链接的“media-queries.css”样式表缺少自闭括号'/>'
根据我的阅读，这些小不一致不会导致浏览器出现很多问题，但如果您的代码开始做一些有趣的事情，您应该始终仔细检查是否有不准确之处。
我在头部下方看不到任何东西，但我认为您只是想贴近粘贴内容的底部。也就是说，您粘贴的内容应该是功能性 (X)HTML，但没有包含实际的 CSS 媒体查询。
这是一个响应式 CSS3 @Media Query 样式表到 Github 上的一个 repo（一个基于 Twitter Bootstrap 的 WordPress 主题）https://github.com/retlehs/roots/blob/master/assets/css/bootstrap-responsive.css
在这些文档和实际的 Twitter Bootstrap（也在 Github 上，CSS 是相同的）文档之间，您应该能够看到其他人是如何做的以及为什么这样做。
希望它有所帮助，但如果不查看实际的 CSS，我无法猜测它为什么不起作用。
【讨论】：
嗨，亚当...你能加入 Javascript 聊天吗？我在那里...基本上我看看我是否使用上述功能将其导入 WP？ （上面的一些术语让我头疼）基本上它是我发现的响应式网站设计演示中的外部 CSS 我通常不会在这里逗留（除了我目前正在研究的主题之外，阅读其他主题太容易了）。我愿意帮助你理解一些东西（如果可以的话，我还是个新手，也经常需要解释一些东西）。我的电子邮件在我的个人资料中，如果您想在聊天室见面或其他任何方式，请先与我联系，以便我们计划时间。以上是关于@MediaQuery 在 CSS 中调用的主要内容，如果未能解决你的问题，请参考以下文章
使用不包含 MediaQuery 的上下文调用 MediaQuery.of()。 （紧急援助）
使用 MediaQuery 的响应式元素对齐 - 使用不包含它的上下文调用
如何解决 Flutter 中的 MediaQuery 错误？ [复制]