Alter page style because of screen inches

问题

I'm doing a program where every time a user enters the page, a message of 'Hello' appears for 2 seconds.

I have set the message to appear in a position of ‘left: 75%’ and ‘top:0’

The problem is that I fixed that position when I was testing the style on a 25 '' screen but when I went to my laptop that is 14 '' the message has 'hidden' and I can only see part of it.

Is there any way that the position of the posted message works for all the inches of the screens? How could I solve this? Can someone tell me if this has a solution? Thank you.

Here is my code snippet:

<!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>

回答1:

We say that 'responsive'. You can google it and find many examples about that.
If you want a quick tutorial:

Add this inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
And you can define your styles in css with media

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

This code will only work if window size is larger then 768px

来源：https://stackoverflow.com/questions/55801854/alter-page-style-because-of-screen-inches

标签

css

media-queries

screen

alert