Question

我正在开始一个新网站并尝试响应式设计。

下面是我的html和css，tablet.css似乎没有链接，因为它应该只显示红色主要div的绿色版本。我看过一些人建议在html和css文件中都有这个，有些人说你只需要一个？我尝试了几种不同的方式，但没有一种方法适合我！

任何帮助将不胜感激！欢呼声，

    <!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" />
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
    <title>Test Homepage</title>


    <link href="resp_tablet.css" type="text/css" rel="stylesheet" media="screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
    <link href="resp_desktop.css" type="text/css" rel="stylesheet" media="screen and (min-device-width: 1024px)" />

    </head>

    <body>

      <div id="main">

      </div>

    </body>
    </html>

/*desktop version*/

@media screen and (min-width: 1024px) {



#main   {margin: 0 auto;
            width:1000px;
            height:382px;
            background-color:#F03;
}


}


/*tablet version*/

@media screen and (min-width: 768px) and (max-width: 1024px) {



#main   {margin: 0 auto;
            width:200px;
            height:182px;
            background-color:#0F0;
}

}

Answer 1

你只需要像这样更改链接标签：

 <link href="resp_tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 1024px)" />
 <link href="resp_desktop.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" />

CSS媒体查询 - 链接到第二个样式表不起作用

1 个答案: