图像上的响应文本

Question

每当我将文字放在图片上并进入移动视图时，都会发生这种情况（请参见下图）。理想情况下，我需要文字和按钮来更改屏幕尺寸？ 我曾尝试将其放置在其中

@media only screen and (max-device-width: 480px) {
p {
font-size: 10px;
}
}

这是HTML代码

<div class="col-md-6">
<div class="acc">
<img class="img-responsive img-center" src="img/SECC.png" width="960px">
<div class="overlay">

<p id="SECC">SECC, Glasgow</p>
    <p id="SECCSub1">

    Friday 28 November 2015</p>


    <p id="SECCSub2">Saturday 29 November 2015</p>

    <p id="SECCSub3">Sunday 30 November 2015</p>

    <p id="SECCbutton"><button class="buttontest">BUY TICKETS</button></p>
    </p>
    </div>
    </div>

这是CSS

.acc{
    position: relative;
    display: table;
    height: 300px
}
.overlay {
    display: table-cell;
    vertical-align: middle;
}
    #SECC
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 35pt;
    font-weight: bold;
    left: 30%;
    top: 0%
}


#SECCSub1
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 17pt;
    font-weight: bold;
    left: 35%;
    top: 34%;
}
#SECCSub2
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 17pt;
    font-weight: bold;
    left: 33%;
    top: 41%;
}
#SECCSub3
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 17pt;
    font-weight: bold;
    left: 34%;
    top: 48%;
}
#SECCbutton
{
    z-index: 100;
    position: absolute;
    color: white;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
    font-size: 20pt;
    font-weight: bold;
    left: 37%;
    top: 65%;
}

我没有销售代表来发布图像，因此这里是其链接http://i.stack.imgur.com/HZCW8.png

Answer 1

您是否尝试过使用

@media only screen and (max-device-width: 480px) {
p {
   font-size: 10px!important;
 }
}

我把它扔进了JS小提琴中， !important是使实时取景反应了。

Answer 2

您的代码没有足够的重要性来读取，因为CSS是使用ID设置的。 请记住，媒体查询不会增加特异性。

您需要使用以下任一font-size: 10px !important; ： font-size: 10px !important; ，或者更好的是，引用每个ID。

@media (max-width: 480px) {
  p, #SECC, #SECCSub1, #SECCSub2, #SECCSub3, SECCbutton {
    font-size: 10px;
  }
}

如果您选择这种方式，请确保媒体查询位于CSS文档的底部。