Question

我对CSS有点不好，我对响应式的东西很感兴趣，我想弄清楚如何使主页响应式...

现在，当我尝试根据示例为iPhone 6s调整大小时，我的主页是这样的：

当我全屏显示时，我可以将图像和按钮放在中间，就像我想要的那样，问题在于他们的责任感。...

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>

我想使它具有响应性，以便在每个示例中通过手机打开此页面时都可以单击按钮。...

感谢您的帮助。

Answer 1

您在网页顶部的head标签中有此标签吗？

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

如果不添加它，看看是否有区别

Answer 2

如果您有兴趣让您的网站具有响应能力，那么我将从调查媒体查询开始。

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

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

然后在样式表中，可以定义屏幕尺寸的特定范围，以便如果屏幕尺寸与您设置的条件匹配，则将应用规则。否则，它们将被忽略。这是一个看起来像的例子：

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

您可以了解更多here。

打开div标签响应CSS

2 个答案: