Question

所以我有一个响应式页面，我可以确定图像在断点处消失，但是当我尝试为该断点设置不同的文本属性时它将无法工作我是html，css和响应式的新手所以我想要一些帮助

HTML：

    <div id="info">
    <h2>Wie zijn wij?</h2>
    <p>Van Vliet automatisering ontwikkeld database op maat,
       Binnen veel bedrijven word gewerkt met gegevens. deze gegevens worden nog al eens opgeslagen in een excel werkblad, Bij een kleine hoeveelheid gegevens gaat dit nog goed. Echter word het een probleem wanneer de hoeveelheid gegevens groeit,
       en wanneer er meerdere personen deze gegevens op hetzelfde ogenblik willen raadplegen en of wijzigen. Zo bereikten onze klanten ons met de vraag of er een betere en efficiëntere manier is om met data om te gaan. dit kan op verschillende wijzen en met behulp van verschillende programmeer talen zoals: VBA of VB.net.</p>
    <img src="Images/mbp.png">
    <div style="clear:both"></div>
 </div>

css：

@media (min-width: 320px) and (max-width: 479px) {
    #info img {
        display: none;
    }

    #info p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
}

没有断点的css：

    #info p {
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    text-align: justify;
    margin-left: 1100px;
    margin-top: 200px;
    margin-right: 200px;
    width: 700px;
    font-size: 20px;
    display: inline;
    color: #FFF;
    float: right;
}

Answer 1

可能是Float正确和宽度。检查一下并告诉我。

@media (min-width: 320px) and (max-width: 479px) {
    #info img {
        display: none;
    }

    #info p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        float:inherit;
        width:auto
    }
}

Answer 2

在顶部写下桌面样式，在它下面写入媒体查询/响应样式并尝试float：none。感谢

文字没有响应

2 个答案: