我对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%;
}
网页代码
<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>
我想使它响应迅速，以便在每个示例在手机上打开此页面时可以单击按钮......
我将感谢您的帮助。
你在网页顶部的头标签中有这个吗？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
如果没有添加它，看看这是否有区别
如果您有兴趣使您的网站响应，我将首先研究媒体查询。
在页面的<head>中，您需要添加以下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
然后在样式表中，您可以为屏幕尺寸定义特定范围，以便在屏幕尺寸与您设置的条件匹配时应用规则。否则，它们将被忽略。下面是一个示例：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
您可以在此处了解更多信息。