Question

我有四个主要样式表和另外两个jQuery UI和Flexslider样式表。一个用于重置样式表，一个用于主样式表，另外两个用于媒体查询。问题是，当主样式表和768px到1259px之间宽度的样式表运行良好时，不会应用样式表（max-width：767px）。

这是我的标记

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:1259px)" href="css/responsive_768-1259.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="css/responsive_xxx-767.css" />

<link rel="stylesheet" type="text/css" href="jquery-ui-1.10.4.custom/css/ui-  lightness/jquery-ui-1.10.4.custom.min.css" />
<link rel="stylesheet" type="text/css" href="js/FlexSlider-version-2.2/flexslider.css" />

所以，请帮我弄清楚这一点有什么问题，如何使（max-width：767px）样式表工作。

请注意，主样式表style.css的宽度超过1260px，这是我主容器的宽度。

Answer 1

如果你能把两者结合起来就好了。 responsive_768-1259.css和responsive_xxx-767.css成一个说的responsive.css

您的responsive.css应包含以下内容。

@media screen and (min-width:768px) and (max-width:1280px){
/*-----All of your responsive_768-1259.css goes here---*/
}
@media screen and (max-width:767px){
/*-----All of your responsive_xxx-767.css goes here---*/
}

我的样式表不会使用媒体查询应用于指定的宽度

1 个答案: