1

さまざまなレイアウトにさまざまな CSS スタイルシートを使用しようとしています (タイトルから既に推測されているように) が、残念ながら何も機能していません。

CSSファイルを読み込んでみた

 <link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

メタタグで、私も使ってみました

@media (min-width: 401px) and (max-width: 800px) {
.page{max-width:730px; margin:0 auto; display: block; height:850px;  float:left; }
  }

メインのcssファイルにありますが、変更は発生しません。

これは私のヘッダーがどのように見えるかです：

    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/image-slides.css" type="text/css">
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" type="text/css" />
    <link rel="stylesheet" href="css/main.css" type="text/css" />
    <link rel="stylesheet" href="css/medium-main.css" type="text/css" media="screen and (max-width: 800px)" />

変更しようとしている CSS プロパティは単純な div の幅であるため、ブラウザのサイズを変更しても何も起こりません。

コードの何が問題になっていますか?

4

5 に答える 5

5

次のようなコードを試すだけで、携帯電話の表示やサイズ変更に変更を加えられるようにサイトを応答させることができます。コードのどこが正確にバグを作っているとは思いませんが、指定されたコードはうまく機能します:

<link rel='stylesheet' media='screen and (max-width: 700px)' href='stylesheets/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='stylesheets/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='stylesheets/wide.css' />
于 2013-08-27T16:33:22.287 に答える
5

それがコードの順序付けの方法だと思います。

元の CSS コードを最初に配置し、次に他の画面を@mediaサイズ順に配置する必要があります。

...original CSS code...

@media(max-width:300px) {...}  

@media(max-width:533px) {...}  

@media(max-width:640px) {...}
于 2015-07-11T13:54:17.417 に答える
0

これを試して

@media all  and (min-width: 401px) and (max-width: 800px) {
    /*your code here*/
}
于 2013-08-27T17:10:17.890 に答える