我对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>
我想让这个响应,以便可以在每个示例的手机上打开此页面时单击按钮....
我将感谢你的帮助。
您是否在网页顶部的头标中添加了此内容?
<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;
}
}
您可以了解更多here。