Question

我正在做一个程序，每次用户进入页面时，都会出现“ Hello”消息2秒钟。

我已将邮件设置为显示在“左侧：75％”和“顶部：0”的位置

问题是，当我在25英寸的屏幕上测试样式时，我固定了该位置，但是当我使用14英寸的笔记本电脑时，消息已“隐藏”，我只能看到其中的一部分。

有没有办法使张贴的消息的位置在屏幕的所有英寸上都能工作？我该如何解决？有人可以告诉我是否有解决方案？谢谢。

这是我的代码段：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <script>
        function customAlert(msg,duration)
        {
            var styler = document.getElementById("welcomeMessage")
            styler.setAttribute("style","" );
            styler.innerHTML = "<h1>"+msg+"</h1>";
            setTimeout(function()
            {
                styler.parentNode.removeChild(styler);
            },duration);
            document.body.appendChild(styler);
        }
    </script>


    <style>
        #welcomeMessage{
            font-family: Arial, Helvetica, sans-serif;
            color:#4d4d4d;
            background: rgba(0, 0, 255,0.6);
            position:fixed;
            padding:10px;
            text-align:center;
            left: 75%;
            top:0;
            margin-left:-5px;
            width:500px;
        }

        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            font-size: 120%;
        }

        #div2 { /* Style the header */
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }

        /*Navigation bar*/
        ul {
            font-family: Arial, Helvetica, sans-serif;
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f1f1f1;/*f1f1f1/*#333*/
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: #333333; /*333333*/
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        li a:hover {
            background-color: white; /*#f9f9f9*/ /*Background colour when mouse on top*/
        }

        li a.active {
            background-color: white;
            color: black;
        }

    </style>

</head>


<body>

<div id="welcomeMessage"></div>

<script> customAlert("Hello!", 2000)</script>

<div id="div2">
    <h1>Project</h1>
</div>

<div class="tab" id="navbar">
    <ul>
        <li><a class="active">Tab 1</a></li>
        <li><a target="_blank">Tab 2</a></li>
        <li><a target="_blank">Tab 3</a></li>
    </ul>
</div>

</body>
</html>

Answer 1

我们说“响应”。您可以在Google上搜索并找到许多与此相关的示例。
如果您想快速入门：

将其添加到head标记内
<meta name="viewport" content="width=device-width, initial-scale=1">
您可以使用媒体在CSS中定义样式

@media only screen and (min-width: 768px) {
    #welcomeMessage {
        left: 50%;
    }
}

仅当窗口大小大于768px时，此代码才有效

由于屏幕英寸而改变页面样式

1 个答案: