Включите теги div, реагирующие на CSS - PullRequest
Новая
       7

Включите теги div, реагирующие на CSS

0 голосов
/ 31 августа 2018

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

Сейчас у меня есть такая домашняя страница, когда я пытаюсь изменить размер для IPhone 6s, например:

Полный экран

Проблема изменения размера

Когда я выхожу на полный экран, все в порядке, у меня есть изображение и кнопка th прямо по центру, как я хочу, чтобы проблема была с их чувствительностью ....

Код CSS 

.bodytodo {
background-image: url("../img/investigadores_ipb_site_5.jpg");
background-repeat: no-repeat;
background-size: cover;
}

.caixa {
width: 100%;
margin: 7% auto;
}

.tabela{
margin-left: 35%;
}

.centro {
position: relative;
left: 45%;
}

HTML код 

    <body class="bodytodo">
    <div class="caixa">
        <table class="tabela">
            <tr>
                <td><img src="~/dist/img/logoipbcor-copy.png" height="200" width="500" /></td>
            </tr>
            <tr>        
                <td class="centro"><a class="btn btn-default" asp-controller="Account" asp-action="Login">Entrar</a></td>
            </tr>
        </table>
    </div>
</body>

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

Буду признателен за вашу помощь.

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Если вы заинтересованы в том, чтобы ваш сайт был адаптивным, я бы начал с просмотра медиазапросов.

В <head> вашей страницы вам нужно добавить следующее: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Затем в своей таблице стилей вы можете определить конкретные диапазоны для размеров экрана, так что если размер экрана соответствует заданным вами критериям, правила будут применяться. В противном случае они будут игнорироваться. Вот пример того, как это выглядит: 

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

Вы можете узнать больше здесь .

0 голосов
/ 31 августа 2018

У вас есть это в вашей метке в верхней части веб-страницы? 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Если не добавить это и посмотреть, если это имеет значение

...