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

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

0 голосов
/ 23 апреля 2019

Я занимаюсь программой, в которой каждый раз, когда пользователь заходит на страницу, на 2 секунды появляется сообщение «Hello».

Я установил, чтобы сообщение отображалось в позициях «слева: 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 Ответ

2 голосов
/ 23 апреля 2019

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

  • Добавьте это внутри тега head
    <meta name="viewport" content="width=device-width, initial-scale=1">

  • И вы можете определить свои стили в css с помощью мультимедиа 

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

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

...