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

これはおそらくあなたが望むよりも複雑になるでしょうが、CSS3メディアクエリの仕様から始めましょう。

問題はないはずですが、次の点について説明します。1.古いバージョンのIEで新しいHTML5要素を認識したい場合にのみGoogleのhtml5shimが必要です。技術的にはXHTMLに含めるべきではありません。2。リンクされた " media-queries.css"スタイルシートに自動終了ブラケット'/>'がありません

私が読んだことから、これらの小さな不一致はブラウザに多くの問題を引き起こしませんが、コードが面白いことを始めた場合は、常に不正確さを再確認する必要があります。

頭の下には何も見えませんが、貼り付けたものの底に向かっていると思います。とはいえ、貼り付けたものは機能的な（X）HTMLである必要がありますが、実際のCSSメディアクエリは含まれていません。

これは、Github（Twitter BootstrapベースのWordPressテーマ） https://github.com/retlehs/roots/blob/master/assets/css/bootstrap-sensitive.cssのリポジトリに対するレスポンシブCSS3@MediaQueryスタイルシートです。

これらのドキュメントと実際のTwitterBootstrap（GithubでもCSSは同じです）ドキュメントの間で、他の人がどのようにそれを行っているか、そしてその理由を確認できるはずです。

それがお役に立てば幸いですが、実際のCSSを見なければ、なぜそれが機能しないのかを推測する方法はありません。

于 2012-11-14T08:56:59.823 に答える
0

あなたへの道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" />
于 2012-11-14T09:12:03.483 に答える