Question

每当我将文字放在图像上并进入移动视图时，我就会发生这种情况（见下图）理想情况下，我需要文字和按钮来改变屏幕大小？ althoguh我试过放置这个什么也没做什么

@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%;
}

我没有Rep发布图片，所以这里是它的链接 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文档的底部。

响应文本在图像上

2 个答案: