Question

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

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

我认为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>

Answer 1

这可能比您想要的更多，但让我们从CSS3 Media Query spec开始。

一些不应该有问题的事情，但我将解决： 1.如果您希望旧版本的IE识别新的HTML5元素，那么您只需要谷歌的html5shim - 技术上不应该是XHTML 2.您链接的“media-queries.css”样式表缺少自动关闭括号“/＆gt;”

根据我的阅读，这些小的不一致不会导致浏览器出现很多问题，但如果你的代码开始做有趣的事情，你应该总是仔细检查是否存在不准确之处。

我看不到头部下方的任何东西，但我认为你只是意味着粘贴在底部。也就是说，你粘贴的内容应该是功能性（X）HTML，但不包含实际的CSS媒体查询。

这是一个响应式CSS3 @Media查询样式表，用于Github上的回购（基于Twitter Bootstrap的WordPress主题）https://github.com/retlehs/roots/blob/master/assets/css/bootstrap-responsive.css

在这些文档和实际的Twitter Bootstrap之间（也在Github上，CSS是相同的）文档，您应该能够看到其他人如何做到这一点以及为什么。

希望它有所帮助但是如果不看实际的CSS，我就无法猜出它为什么不起作用。

Answer 2

您确定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" />

@MediaQuery调用CSS

2 个答案: