html - 无法根据屏幕分辨率应用样式表

Question

我正在尝试用 html 开发响应式网站，因为我已经为桌面编写了两个 css 文件 "large.css"* 和 "small.css"* 手持设备。现在我将它们链接到我页面的 head 标记中:

<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" />

正文标记中的 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。

我上面的代码有什么问题。请给我任何解决方案。谢谢

Answer 1

使用最大宽度:

<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)" />