0

我正在尝试用 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;
}

小.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

不需要添加两个css文件

您可以只使用一个文件来完成。此外，您只需要编写您想要改写的 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 回答