CSS叠加不适用于手机

Question

我使用网络上找到的代码来覆盖CSS。 叠加层用于显示图表的帮助。

在台式机上它运行良好。

我可以设置高度，以便所有文字都适合叠加层。

但如果我在手机上看它，叠加层似乎有一个我无法改变的设定高度。

只有大约一半的文字有白色背景，这使得阅读起来很难。

如何更改它以便移动用户也可以阅读所有文本？

代码粘贴在下面。 如果您想在我的网页上测试，请访问www.hoppvader.nu

但是为了能够看到此图表和叠加层，您需要接受cookie并在页面上设置一些设置。

右上角的设置图标，并将Visa lufttrycksstatistik设置为＆＃34; Ja＆＃34;。

在复选框中接受Cookie并创建Cookie。

以后可以在同一页面上删除Cookie，但右侧有按钮（如果您没有Cookie，则不可见）。

CSS：

    #overlay{ /* we set all of the properties for are overlay */
                height:800px;
                width:80%;
                margin:0 auto;
                background:white;
                color:black;
                padding:35px;
                position:absolute;
                top:5%;
                left:7%;
                z-index:1000;
                display:none;
                /* CSS 3 */
                -webkit-border-radius:10px;
                -moz-border-radius:10px;
                -o-border-radius:10px;
                border-radius:10px;
            }

            #mask{ /* create are mask */
                position:fixed;
                top:0;
                left:0;
                background:rgba(0,0,0,0.6);
                z-index:500;
                width:100%;
                height:100%;
                display:none;
            }
            /* use :target to look for a link to the overlay then we find are mask */
            #overlay:target, #overlay:target + #mask{
                display:block;
                opacity:1;
            }
            .close{ /* to make a nice looking pure CSS3 close button */
                display:block;
                position:absolute;
                top:-20px;
                right:-20px;
                background:red;
                color:white;
                height:40px;
                width:40px;
                line-height:40px;
                font-size:35px;
                text-decoration:none;
                text-align:center;
                font-weight:bold;
                -webkit-border-radius:40px;
                -moz-border-radius:40px;
                -o-border-radius:40px;
                border-radius:40px;
            }
            #open-overlay{ /* open the overlay */
                padding:5px 5px;
                background:black;
                color:white;
                text-decoration:none;
                display:inline-block;
                margin:0px;
                -webkit-border-radius:10px;
                -moz-border-radius:10px;
                -o-border-radius:10px;
                border-radius:10px;
            }


HTML:
<a href='#overlay' id='open-overlay'><img src='../barchart.php?ICAO=ESNS'></img></a>
    <div id='overlay'>
                <a href='#' class='close'>&times;</a>
                <div style='height:-5%'></div>
                <center><h2 style='font-size:35px'>Lufttryck</h2></center>
                Lufttrycket har stor betydelse för hur vädret kommer att bli.<br>
                Det finns många andra anledningar också förutom lufttrycket men nedan följer generella 'regler' för lufttrycksförändringar.<br>
                <br>
                <br>
                <p11>Lufttrycket ökar</p11><br>
                Om lufttrycket ökar men inte för snabbt (mindre än 1 hPa/h), tyder det på att vädret kommer att bli bättre.<br>
                Om lufttrycket ökar snabbt (mer än 1 hPa/h), tyder det på bättre väder på kort sikt men kan också betyda att en högtrycksstorm är på väg. <br>
                <br>
                <br>
                <p11>Lufttrycket sjunker</p11><br>
                Om lufttrycket sjunker konstant och långsamt (mindre än -1 hPa/h) kommer vädret troligtvis att försämras långsamt.<br>
                Om lufttrycket sjunker snabbt (mellan -1 till -2 hPa/h) kan ni räkna med starka vindar.<br>
                Om det sjunker mer än -2 hPa/h då kan ni räkna med mycket starka vindar.<br>
                <br>
                <br>
                <p11>Hur avläser jag diagrammet?</p11><br>
                Lufttrycket i värde skrivs ut ovanför var stapel.<br>
                Värdet under stapeln är när värdet uppmättes. Dagen står överst och tiden under.<br>
                Tänk på att lufttrycket varierar lite under en dag och behöver inte betyda väderförändringar.<br><br>
                Alla stationer uppdateras när någon av hoppvädersidorna visas.<br>
                Om en station inte visar några staplar alls beror det på att stationen inte varit igång sedan mätningarna började sparas.<br>
            </div>
            <div id='mask' onclick='document.location='#';'></div>

Answer 1

从你的css样式height:100%中取出#overlay，div会调整其背景以适应窗口调整大小时的内容。

这里的片段

＆＃13;

＆＃13;

#overlay{ /* we set all of the properties for are overlay */
    width:80%;
    margin:0 auto;
    background:white;
    color:black;
    padding:35px;
    position:absolute;
    top:5%;
    left:7%;
    z-index:1000;
    display:none;
    /* CSS 3 */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay:target, #overlay:target + #mask{
    display:block;
    opacity:1;
}
.close{ /* to make a nice looking pure CSS3 close button */
    display:block;
    position:absolute;
    top:-20px;
    right:-20px;
    background:red;
    color:white;
    height:40px;
    width:40px;
    line-height:40px;
    font-size:35px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
    -webkit-border-radius:40px;
    -moz-border-radius:40px;
    -o-border-radius:40px;
    border-radius:40px;
}
#open-overlay{ /* open the overlay */
    padding:5px 5px;
    background:black;
    color:white;
    text-decoration:none;
    display:inline-block;
    margin:0px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

＆＃13;

<a href='#overlay' id='open-overlay'><img src='../barchart.php?ICAO=ESNS'></img></a>
<div id='overlay'>
<a href='#' class='close'>&times;</a>
<div style='height:-5%'></div>
<center><h2 style='font-size:35px'>Lufttryck</h2></center>
Lufttrycket har stor betydelse för hur vädret kommer att bli.<br>
Det finns många andra anledningar också förutom lufttrycket men nedan följer generella 'regler' för lufttrycksförändringar.<br>
    <br>
    <br>
    <p11>Lufttrycket ökar</p11><br>
    Om lufttrycket ökar men inte för snabbt (mindre än 1 hPa/h), tyder det på att vädret kommer att bli bättre.<br>
    Om lufttrycket ökar snabbt (mer än 1 hPa/h), tyder det på bättre väder på kort sikt men kan också betyda att en högtrycksstorm är på väg. <br>
    <br>
    <br>
    <p11>Lufttrycket sjunker</p11><br>
    Om lufttrycket sjunker konstant och långsamt (mindre än -1 hPa/h) kommer vädret troligtvis att försämras långsamt.<br>
    Om lufttrycket sjunker snabbt (mellan -1 till -2 hPa/h) kan ni räkna med starka vindar.<br>
    Om det sjunker mer än -2 hPa/h då kan ni räkna med mycket starka vindar.<br>
    <br>
    <br>
    <p11>Hur avläser jag diagrammet?</p11><br>
    Lufttrycket i värde skrivs ut ovanför var stapel.<br>
    Värdet under stapeln är när värdet uppmättes. Dagen står överst och tiden under.<br>
    Tänk på att lufttrycket varierar lite under en dag och behöver inte betyda väderförändringar.<br><br>
    Alla stationer uppdateras när någon av hoppvädersidorna visas.<br>
    Om en station inte visar några staplar alls beror det på att stationen inte varit igång sedan mätningarna började sparas.<br>
</div>
<div id='mask' onclick='document.location='#';'></div>

＆＃13;

＆＃13;

＆＃13;