圖像上的響應文本

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文檔的底部。