转动div标签响应CSS

问题描述 投票:0回答:2

我对CSS有点不好,我有回应的东西,我想知道如何让我的主页响应...

现在,当我尝试为每个示例的iPhone 6s调整大小时,我有这样的主页:

Full screen

Resize Problem

当我全屏显示它没关系,我有中心的图像和按钮就像我想要的问题是他们的责任....

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>

我想让这个响应,以便可以在每个示例的手机上打开此页面时单击按钮....

我将感谢你的帮助。

html css responsive
2个回答
1
投票

您是否在网页顶部的头标中添加了此内容?

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

如果没有添加,看看是否有所作为


0
投票

如果您有兴趣使您的网站响应,我将首先考虑媒体查询。

在页面的<head>中,您需要添加以下内容:

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

然后在样式表中,您可以定义屏幕大小的特定范围,以便在屏幕大小与您设置的条件匹配时,将应用规则。否则,他们将被忽略。以下是一个示例:

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

您可以了解更多here

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.