图像上的响应文本

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;，或者更好的方法是引用每个ID。

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

如果您选择该路线，请确保媒体查询位于CSS文档的底部。