Изменить стиль страницы из-за дюймов экрана

#css #media-queries #screen #alert

#css #медиа-запросы #экран #предупреждение

Вопрос:

Я делаю программу, в которой каждый раз, когда пользователь заходит на страницу, на 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>

1. Будет ли установка #welcomeMessage на right: 0 вместо left: 75% работы?

2. @jla Это сработало бы для файла на моем веб-сайте, но поскольку сообщение также находится в нескольких файлах, размещенных в разных файлах, когда я запускаю программу на разных экранах с разными дюймами, позиции меняются.

Ответ №1:

Мы говорим, что «отзывчивый». Вы можете погуглить и найти много примеров по этому поводу.
Если вы хотите краткое руководство:

Добавьте это в head тег
<meta name="viewport" content="width=device-width, initial-scale=1">
И вы можете определить свои стили в css с помощью media

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

Этот код будет работать, только если размер окна больше 768 пикселей