Блог

Главная - Вопросы по программированию - почему макет моего сайта отличается на мобильных устройствах?

почему макет моего сайта отличается на мобильных устройствах?

#html #css

#HTML #css

Вопрос:

Я пытаюсь создать простой веб-сайт для домашнего задания.

Вот как сайт выглядит в Google Chrome.

Сначала я использовал px вместо «%» для своего сайта, затем изменил его, потому что оказалось, что он выглядит по-разному в разных браузерах. После того, как я использовал «%», я был доволен, потому что он выглядел так же, но затем я попытался открыть его в Google Chrome моего телефона, и вот как это выглядит

введите описание изображения здесь

Я попытался использовать окно просмотра meta, но это только ухудшило ситуацию. Все элементы перекрываются друг с другом. Мои друзья не использовали никаких медиа-запросов, и их сайты по-прежнему выглядели нормально как на мобильных устройствах, так и на десктопах (шрифты выглядели меньше и все такое, но макет все еще был в порядке).

вот код css:

     <style>
        .header{
            background-image: url("https://www.blibli.com/friends/assets/masakan-indonesia-featured-696x464.jpg");
            position: absolute;
            height: 25%;
            width: 99%;
            text-align: center;
            filter: blur(2px);
            -webkit-filter: blur(2px);
        }

        .headertext{
            font-family: Bebas Neue;
            font-size: 4.5em;
            top: 7%;
            left: 28%;
            position: absolute;
            color: white;
            z-index: 1;
            text-decoration: none;
        }

        /* Add a black background color to the top navigation */
        .topnav {
            background-color: chocolate;
            overflow: hidden;
            position: absolute;
            width: 99%;
            top: 26.5%;
        }

        /* Style the links inside the navigation bar */
        .topnav a {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 1% 9.92%;
            text-decoration: none;
            font-size: 1.373em;
            font-family: Roboto;
        }

        /* Change the color of links on hover */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* Add an active class to highlight the current page */
        .topnav a.active {
            color: white;
        }

        /* Hide the link that should open and close the topnav on small screens */
        .topnav .icon {
            display: none;
        }

        .sidebar{
            width: 20%;
            height: 107%;
            float: left;
            display: block;
            top: 40%;
            position: absolute;
            background-color: rgba(148, 145, 141, 0.37);
        }

        .main{
            width: 76.3%;
            height: 220%;
            display: block;
            position: absolute;
            top: 40%;
            left: 23%;
            background-color: rgba(148, 145, 141, 0.37);
        }

        .box{
            border:1px solid red;
            position:absolute;
            width:80%;
            height:22%;
            left: 5%;
            transition: 0.2s;
        }

        .box:hover{
            transform: scale(1.05);
        }

        .top{
            top: 3%;
        }

        .middle{
            position: absolute;
            top: 31%;

        }

        .bottom{
            position:absolute;
            bottom:19%
        }

        .picture{
            object-fit: cover;
            width: 50%;
            height: 85%;
            position: absolute;
            top: 7.5%;
            left: 3%;
        }

        .text {
            width: 40%;
            height: 80%;
            position: absolute;
            top: 7.5%;
            right: 4%;
            font-family: Roboto;
            font-size: 0.9em;
            text-align: justify;
        }

        .judul{
            font-family: Bebas Neue;
            font-size: 1.6em;
            line-height: 2;
            letter-spacing: 0.3em;
        }

        .link{
            bottom: 0px;
            position: absolute;
            font-family: Roboto;
            font-size: 0.7em;
        }

        .button{
            text-decoration: none;
            display: inline-block;
            padding: 1.5% 10%;
            position: absolute;
            bottom: 7%;
            left: 35%;
            font-family: Roboto;
            font-size: 1.2em;
        }

        .button:hover{
            background-color: white;
            color: black;
        }

        .more{
            background-color: chocolate;
            color: white
        }

        .rekomendasi{
            display: block;
            position: absolute;
            width: 96%;
            height: 5%;
            font-size: 1.8em;
            font-family: Bebas Neue;
            padding: 2%;
            background-color: chocolate;
            text-align: center;
            letter-spacing: 0.1em;
            color: white;
        }

        .rekomendasicontent{
            position: absolute;
            top: 85%;
            font-size: 0.6em;
            text-align: left;
            font-family: Roboto;
            letter-spacing: 0em;
            color: black;
            line-height: 160%;
        }

        .populer{
            display: block;
            position: relative;
            top: 49%;
            width: 96%;
            height: 5%;
            font-size: 1.8em;
            font-family: Bebas Neue;
            padding: 2%;
            background-color: chocolate;
            letter-spacing: 0.1em;
            color: white;
            text-align: center;
        }

        .populercontent{
            font-size: 0.6em;
            text-align: left;
            font-family: Roboto;
            letter-spacing: 0em;
            position: absolute;
            top:85%;
            color: black;
            line-height: 160%;
        }

        .link2{
            color: black;
            text-decoration: none;
            background-color: none;
        }

        li{
            transition: 0.2s;
        }

        li:hover{
            transform: scale(1.1);
        }

        .footer{
            width: 97.8%;
            position: absolute;
            top: 260%;
            background-color: chocolate;
            font-family: Roboto;
            font-size: 1em;
            color: white;
            text-align: center;
            padding: 0.5%;
        }

    </style>

Комментарии:

1. Чего вы ожидали, когда вы измерили все в процентах от ширины, а затем сделали ширину намного меньше?

2. position: absolute очень редко правильный подход к позиционированию элементов. В наши дни есть гораздо лучшие решения. Исследуйте гибкие окна , сетки и медиа-запросы

3. Точно. Итак, изучите технологии, которые я упомянул, и создайте современный макет.

4. position Свойство полезно для очень специализированных небольших частей макетов. Это редко полезно для крупномасштабных макетов.

5. Да, это просто, но вы должны знать современные CSS-макеты, такие как flexbox, CSS Grid и макет на основе столбцов. Я предлагаю вам изучить этот канал Youtube и Freecodecamp