Question

我正在尝试用html开发reponsive网站，因为我为桌面写了两个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>

large.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之间时我希望页面为reffer small.css 。

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

Answer 1

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

Answer 2

首先，可能在第一个样式表链接 href =“Styles / lasrge.css 上有拼写错误。请确保不是拼错问题的根源，纠正为 HREF =“样式/ large.css

Answer 3

无需添加两个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; 
    }
}

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

3 个答案: