2

我一直在调整网站以使其更具响应性，并且我一直在关注发送给我的演示中的代码。

但是由于某种原因，它似乎没有像移动浏览器中所说的那样调整大小。

我认为这是因为 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() ) { ?> &raquo; 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>
4

2 回答 2

0

你确定你的道路media-queries.css是正确的吗？首先确保 CSS 正在加载，然后我们可以开始讨论实际的媒体查询本身。

如果您的文件在主题文件夹中，那么它将类似于：

/wp-content/themes/media-queries.css

或者：

<link href="<?php bloginfo('template_url'); ?>/media-queries.css" 
    rel="stylesheet" type="text/css" media="screen" />
于 2012-11-14T09:12:03.483 回答
0

这可能会比您想要的更多，但让我们从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，我无法猜测它为什么不起作用。

于 2012-11-14T08:56:59.823 回答