0

タイトルの通り、PHP Web ページにメディア画面幅固有の CSS を設定できません。

これが私の<head>セクションですindex.php：

<!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>

    <title><?php echo SITENAME; ?> - <?php echo SITEDESC; ?></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0; minimumscale=1.0, maximum-scale=1.0; user-scalable=0;" /> <!-- for responsive coding, the "Viewport" meta tag -->

    <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script type='text/javascript' src='scripts/respond.min.js'></script> <!-- for responsive mobile themes -->

    <link type="text/css" rel="stylesheet" href="style.css"/>        
        
</head>

私の HTML 要素<header> ... </header>の場合、私の CSS (のstyle.css) で、次のように指定しました:

header{
    background: #1e5799;
    min-height: 40px;
    max-height: 136px;
}

しかし、"Web Developer" ツールバーのResize » View Responsive Layoutsを使用すると、さまざまな幅のデバイス レイアウトでいくつかの低下が見られます。

例:
私の<header>タグでは、内側の要素がはみ出しているため、ヘッダーの高さを増やす必要があります。だから私はで指定しましたstyle.css：

/* Media Queries for Different Types of Mobile Devices */

/* Mobile portrait (320 x 480) */

@media all and (max-device-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

しかし、それは機能していません。:(

レスポンシブ CSS について何が欠けていますか?

編集

最初の2つの回答の後、彼らの提案とともに、次を使用してみました:

@media screen and (max-width: 320px) {

    header{
        height: 136px !important;
        background-color: #FF0000;
    }

}

はい、メディア CSS を の一番下に置きましたstyle.css。

また、次のように分離してみmobile.cssました：

<link type="text/css" rel="stylesheet" media="screen and (max-device-width: 480px)" href="css/mobile.css" />

次のコードを配置しようとした場所：

header{
    height: 130px;
}

それでもうまくいきません。

4

3 に答える 3

3

この特定のメディア クエリは実際のデバイス サイズ (コンピューターではブラウザー ウィンドウではなくモニター) を対象としているため、開発中max-device-widthは、ウィンドウのサイズ変更の変更を視覚化するのに役立ちません。

一方、max-widthブラウザ ウィンドウの幅をターゲットにしているため、サイズ変更では完全に機能します。

特に小さなデバイスをターゲットにしたい (ウィンドウのサイズ変更に応答しない) 場合を除き、max-width代わりに選択することをお勧めします。

于 2013-09-14T10:57:47.363 に答える
2

すべてのデバイスでレスポンシブなレイアウトを取得するのではなく、通常はhttp://codepen.io/anon/pen/iFCHj i を確認してください。max-widthmax-device-width

また、レスポンシブ レイアウトがメイン レイアウトの下にあることを確認してください。そうしないと、!important がすべてに設定されていない限り、ブラウザーはメディアを無視します。

于 2013-09-14T10:53:22.813 に答える