您好,我还是网络开发的新手。所以我有一个作为 div float 在主页上方的注册页面,但我想知道如何确保 div 以响应方式居中?
页面被分开并包含在页眉中。
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
我的寄存器的CSS
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
我尝试在我的#regscreen 上使用媒体查询:
@media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
但是使用媒体查询似乎无法将页面识别为响应式页面,因为它已经很小了。根据我的理解,如果我错了,请纠正我。
最佳答案
如果没有更多的信息,很难提供准确的答案(如果您添加更多的 HTML 标记会更好),但是...
如果问题是 float 的 div
没有调整大小以适应各种屏幕尺寸(并且由于您是网络开发的新手......欢迎加入!),有几个建议我可以:
1) 您可能通过尝试应用 @media (max-width:300px)
媒体查询来过度复杂它。通过简单地添加以下样式,注册表单应该可以准确地调整大小:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
这将确保表单的宽度始终为屏幕宽度的 90% 或 600 像素,以较小者为准。
2) 如果您认为未触发媒体查询可能存在问题,测试它的一种简单方法是在该断点处做一些非常明显的事情...例如:
@media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
通过这样做,它应该允许您开始排除故障,无论是您的媒体查询语法还是其他问题;也许媒体查询样式被正确应用(因此您的媒体查询语法没问题)但新样式稍后在 CSS 中被覆盖(或由于某些规则的特殊性)。
如果您向您的问题添加更多信息,请告诉我,我会再看一遍,但在此之前,这有望帮助您走上正轨。
关于html - 如何使 float 页面 div 响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33250261/