Это, как это выглядит на ПК. Это выглядит так, как на мобильных устройствах. Я хочу, чтобы кнопки на мобильном телефоне были меньше (автоматически подстраиваются под размер экрана).

Это HTML и CSS для страницы:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .container {
                position: relative;
                width: 100%;
            }
            .container img {
                width: 100%;
                height: auto;
                right: 0;
                top: 0;
            }
            .container .btn {
                position: absolute;
                top: 45%;
                left: 50%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #555;
                color: white;
                font-size: 20px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }
            .container .btt {
                position: absolute;
                top: 45%;
                left: 24%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #555;
                color: white;
                font-size: 20px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }
            .container .btc {
                position: absolute;
                top: 45%;
                left: 76%;
                transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                background-color: #555;
                color: white;
                font-size: 20px;
                padding: 12px 24px;
                border: none;
                cursor: pointer;
                border-radius: 5px;
                text-align: center;
            }
            .container .btn:hover {
                background-color: white;
                color: black;
            }
            .container .btt:hover {
                background-color: white;
                color: black;
            }
            .container .btc:hover {
                background-color: white;
                color: black;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <img src="some img" alt="" class="alignnone size-full wp-image-1660" />
            <a href="some ref" <button class="btn">ER DU ARRANGØR?</button></a>
            <a href="some ref" <button class="btt">ER DU MARKEDSFØRER?</button></a>
            <a href="some ref" <button class="btc">KONTAKT OSS!</button></a></div>
    </body>

</html>

Я предполагаю, что, если это возможно, решением было бы изменить .container .btx для кнопок. Я не могу найти способ сделать это.

0
owninggreendragsdude 21 Авг 2018 в 16:49

3 ответа

Лучший ответ

Вам обязательно нужно заглянуть в медиа-запросы .

Они позволяют работать на разных экранах, определяемых различными параметрами (ширина, высота, ориентация).

@media (max-width: 800px) { 
    //your code goes here
}

Я думаю, это то, что вы ищете.

Также взгляните на ширину и высоту области просмотра единицы (vh и vw), которые позволяют изменять размеры элементов в соответствии с размером окна.

div{ 
    height: 50vh;//50% of the viewport (window) height
    width: 40vw;//40% of the viewport (window) width
}
4
TylerH 21 Авг 2018 в 14:29

Как сказано в ответе выше, вы обязательно должны проверить @media запрос и vh и vw. Я также рекомендую вам взглянуть на calc () .


Я немного подправил ваш код с помощью vh, vw, calc() с некоторыми незначительными изменениями, и это то, что я придумал. Настройте значения в width и calc() в соответствии с вашими потребностями. Да, я не использую @media здесь.

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .container {
      position: relative;
      width: 100%;
    }
    
    .container img {
      width: 100%;
      height: auto;
      right: 0;
      top: 0;
    }
    
    button {
      position: absolute;
      top: 45%;
      width: 23vw;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      background-color: #555;
      color: white;
      font-size: calc(0.5rem + 1vw);
      padding: 12px 24px;
      border: none;
      cursor: pointer;
      border-radius: 5px;
      text-align: center;
    }
    
    .container .btn {
      left: 50%;
    }
    
    .container .btt {
      left: 24%;
    }
    
    .container .btc {
      left: 76%;
    }
    
    .container .btn:hover {
      background-color: white;
      color: black;
    }
    
    .container .btt:hover {
      background-color: white;
      color: black;
    }
    
    .container .btc:hover {
      background-color: white;
      color: black;
    }
  </style>
</head>

<body>
  <div class="container">
    <img src="some img" alt="" class="alignnone size-full wp-image-1660" />
    <a href="some ref"><button class="btn">ER DU ARRANGØR?</button></a>
    <a href="some ref"><button class="btt">ER DU MARKEDSFØRER?</button></a>
    <a href="some ref"><button class="btc">KONTAKT OSS!</button></a></div>
</body>

</html>
1
Vivek 21 Авг 2018 в 14:36

Я нашел свои старые коды CSS для отзывчивых. Да, вы должны использовать медиа, что-то вроде:

@media (max-width: 991px) {
    .quotesBox {
        font-size: 19px;
    }
    .ftrLinks li a {
        padding: 0px 15px;
    }
    .socialLinks li {
        padding: 0px 10px;
    }
    .socialLinks li a img {
        width: 37px;
        height: 37px;
    }
}

Я надеюсь, что это может помочь вам, просто изменить для ваших нужд

1
Stefan Janjic 21 Авг 2018 в 14:30
51950248