内容页继承母版页的四个 css 样式文件之一

Question

我正在 asp.net 建立一个网站，我为我的 css 文件制作了一个带有 link 标签的母版页。我为每种屏幕格式使用了 1 个全局 css 文件，为小型、中型和大型屏幕使用了 3 个 css 文件。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="Styles/style.css" media="all">
    <link rel="stylesheet" type="text/css" href="Styles/small-style.css" media="all and (max-width:699px)">
    <link rel="stylesheet" type="text/css" href="Styles/medium-style.css" media="all and (min-width:700px) and (max-width:1499px)">
    <link rel="stylesheet" type="text/css" href="Styles/large-style.css" media="all and (min-width:1500px)">

出于某种原因，在我的内容文件中，html 元素正在使用全局 css 文件（针对每种格式）。例如 (style.css) 这适用于我的内容页面中的 div 与 class contactPage:

.contactPage {
    margin-bottom: 140px;
}

除了使用最小宽度和最大宽度的 3 个 css 文件外，我的内容页面中的 html 元素未使用这些文件（出于某种原因）。例如 (medium-style.css):

.contactPage {
    background-image: url(../Images/ContactBackground.jpg);
    background-size: 300px 500px;
    background-repeat: no-repeat;
    background-position: top right;
}

但是在我的母版页中，这些 css links 工作文件适用于所有页面大小。

我尝试了什么：

在我的内容文件中添加视口。
利用 <style></style>，这可行，但我不想在我的 html 中使用我的任何风格。
将我的内容页面中的 link 元素添加到 css 文件。

我希望有人能帮助我。提前谢谢你。

Answer 1

而不是 html 执行媒体查询将所有 3 个页面合并为一个 css，然后用

之类的东西将它们分开

all css {
your css here
}

@media screen and (max-width: 699px){
css for max-width for 699{
your css here
}
@media screen and (min-width:1500px){
css for max-width for 1500{
your css here
}

我会让 css 中的媒体查询处理它，而不是你的 html

内容页继承母版页的四个 css 样式文件之一

Content page is inheriting one of four css style files from master page

html

css

asp.net

master-pages