Question

我有一个媒体查询，可以在网站移动时更改页脚的外观，但由于某种原因，它似乎不想采用原始基本样式的媒体查询样式。具体的CSS代码如下

.footy {
    background-repeat: no-repeat;
    background-image: url('../Images/LandingBottomRightCorner_FullSpan.png');
    background-position-x: right;
    min-height: 338px;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}

.footytext {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    margin: 13px;
}

.footytextelement {
    color: white;
    font-size: 18pt;
    font-family: Arial;
    font-weight: bold;
}

.joinnow {
    border: 3px solid white;
    border-radius: 12px;
    font-style: italic;
    margin: 10px;
}


.footytext a:hover {
    text-decoration: none;
}


@media (max-width: 1279px) {

/*FOOTER APPEARANCE MOBILE*/
    .footy {
        background-repeat: repeat-x;
        background-image: url('../Images/MBLLandingFooterGradient_ForRepeat.png');
        height: 338px;
        position: relative;
        width: 100%;
        overflow: hidden;
    }

.footytext {
    position: center;
    text-align: center;
    margin: 13px;
}

.footytextelement {
    color: white;
    font-size: 16pt;
    font-family: Arial;
    font-weight: bold;
}

.joinnow {
    border: 3px solid white;
    border-radius: 12px;
    font-style: italic;
    margin: 10px;
}


.footytext a:hover {
    text-decoration: none;
}
}

正在操纵的HTML是：

<div class="footy">
    <div class="footytext">
        <div class="footytextelement">Make a plan.</div>
        <div class="footytextelement">Get medications.</div>
        <div class="footytextelement">Quit.</div>
        <a href="@Url.Action("Contact", "Home")"><div class="footytextelement joinnow">Join Now!</div></a>
    </div>
</div>

Answer 1

＆＃13;

  .footy {
    background-color:red;
    background-position-x: right;
    min-height: 338px;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: hidden;
}

.footytext {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: center;
    margin: 13px;
}

.footytextelement {
    color: white;
    font-size: 18pt;
    font-family: Arial;
    font-weight: bold;
}

.joinnow {
    border: 3px solid white;
    border-radius: 12px;
    font-style: italic;
    margin: 10px;
}


.footytext a:hover {
    text-decoration: none;
}


@media (max-width: 1279px) {

/*FOOTER APPEARANCE MOBILE*/
    .footy {
        background-color:green;
        background-position-x: right;
        background-position-y:bottom; 
        height: 338px;
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
    }

.footytext {
    position: center;
    bottom: 0;
    right: 0;
    text-align: center;
    margin: 13px;
}

.footytextelement {
    color: white;
    font-size: 18pt;
    font-family: Arial;
    font-weight: bold;
}

.joinnow {
    border: 3px solid white;
    border-radius: 12px;
    font-style: italic;
    margin: 10px;
}


.footytext a:hover {
    text-decoration: none;
}
}

＆＃13;

<div class="footy">
    <div class="footytext">
        <div class="footytextelement">Make a plan.</div>
        <div class="footytextelement">Get medications.</div>
        <div class="footytextelement">Quit.</div>
       
    </div>
</div>

＆＃13;

媒体查询中的最大宽度应为768px标准。您已经提供1279px，这意味着无论您是在移动设备还是桌面，媒体查询css都将适用于所有地方。

Answer 2

根据媒体的情况，您说：将这些样式应用于1279px以上。使用min-width和max-width来获得更多控制。

example:
@media (max-width: 719px) {...}
@media (max-width: 1023px) {...}

更多信息：MDN LINK

媒体查询不会覆盖原始样式

2 个答案: