0

私は html でレスポンシブ Web サイトを開発しようとしています。そのために、2 つの css ファイル「large.css」を作成しました*デスクトップ用と「small.css」*ハンドヘルド デバイス。今、私は自分のページのヘッドタグでそれらを次のようにリンクしています:

<link href="Styles/large.css" rel="stylesheet" media="screen and (min-width:980px)" />
<link href="Styles/small.css" rel="stylesheet" media="screen and (min-width:480px)" />

<meta name="viewport" content="width=device-width, user-scalable=false;maximum-scale=1">
<meta charset="utf-8" />

body タグ内の HTML コードは次のとおりです。

<div class="content"></div>

大きい.css:

.content
{
    width: 950px; 
    height: 750px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #FFFFFF; 
    position: relative; 
    top: 461px; 
    left: 0px;
    z-index:-1;
}

small.css

.content
{
    width: 356px; 
    height: 750px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #FFFFFF; 
    position: relative; 
    top: 461px; 
    left: 0px;
    z-index:-1;
}

しかし、ブラウザでサイトを実行すると、ページは常に small.css スタイルを参照します。これは、デスクトップでの私のデザインをすべて台無しにします。

私が欲しいのは、画面の幅が 980px より大きい場合、ページに large.css を参照させ、980px から 480px の間の場合にページに small.css を参照させたいということです。

上記のコードで何が間違っていますか。解決策を教えてください。ありがとう

4

3 に答える 3

2

使用max-width:

<link href="Styles/lasrge.css" rel="stylesheet" media="screen and (min-width:980px)" />
<link href="Styles/small.css" rel="stylesheet" media="screen and (max-width:979px)" />
于 2013-09-06T15:08:06.037 に答える
1

まず、最初のスタイルシート リンクhref="Styles/lasrge.cssにスペル ミスがある可能性があります。それが問題の原因ではないことを確認し、href="Styles/large.cssに修正します。

于 2013-09-06T15:07:59.147 に答える
1

2 つの css ファイルを追加する必要はありません

1 つのファイルのみを使用して実行できます。また、上書きしたいcssを書くだけです。

@media (max-width: 980px){ 
    .content{
        width: 950px; 
        height: 750px; 
        margin-left: auto; 
        margin-right: auto; 
        background-color: #FFFFFF; 
        position: relative; 
        top: 461px; 
        left: 0px;
        z-index:-1;
    }
}

@media (max-width: 979px){ 
    .content{
        width: 356px; 
        height: 750px; 
    }
}
于 2014-06-28T17:51:27.037 に答える