Question

我的代码有问题。因为我正在尝试使用媒体查询使用最小和最大宽度创建响应式网站。我的查询的某些部分很好，但有一个元素没有读取我的CSS媒体查询。

左侧有导航侧边栏。我想使用媒体查询调整大小。但如果我调整它的大小。它没有读取媒体查询中包含的最小宽度。当我检查代码。只有color属性正常工作。当我使用Chrome中的开发人员工具调试它时。它从另一个名为＆＃39; product.css＆＃39;的CSS文件中读取CSS。而不是我的＆＃39; responsive.css＆＃39;。

我该怎么办？

这是我对responsive.css的简单CSS

@media screen and (max-width: 1603px) {

    #searchhandler { 
        color: red; 
        min-width: 310px;
    }

}

这是我的product.css中的CSS

#searchhandler {
    width: 20%;
    display:none;
    min-width: 316px;
}

我真的是CSS的新手，这就是为什么我在这个部分遇到困难的原因。

Answer 1

好的我解决了我的问题。它不是媒体查询，而是用于在我的标题中包含CSS文件的链接。

我的旧代码就像这样

<link rel="stylesheet" type="text/css" href="./css/product.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/responsive.css" />

应该是

<link rel="stylesheet" type="text/css" href="./css/responsive.css" media="all" />
<link rel="stylesheet" type="text/css" href="./css/product.css" />

如何为响应式网站设置最小和最大宽度的CSS样式？

1 个答案: