如何使浮动页面div响应

嗨我还是web开发新手。所以我有一个注册页面浮动为主页上方的div，但我想知道如何确保div以响应方式居中？如何使浮动页面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%; 
} 
}

但是，使用媒体查询似乎并不承认页面作为响应它已经很小。从我的理解中，如果我错了，请纠正我。

来源

2015-10-21 zana

虽然您提供了一些信息，但如果您可以提供更多信息，那将非常棒。如果你可以创建一个展示你的问题的JSFiddle，或者添加一些实际的HTML标记（不仅仅是PHP包含），我们可能会提供更多帮助。 –

用于调试的不完整信息。因为你面临的问题是在前端，所以你可以创建jsfiddle让我们看到大局！ – Lahori

这是很难提供一个确切的答案没有更多的信息来源，但（如果您加入了更多的HTML标记，这将是巨大的）...

如果问题是，浮动div不会调整大小以适应不同的屏幕尺寸（因为你是新的Web开发......欢迎登机！），有一对夫妇的建议，我可以做：

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 */ 

}

这将确保形式的宽度为总是屏幕宽度OR 600px的中较小的任一90％。

2）如果你觉得有可能是与媒体查询不trigerring一个问题，一个简单的方法来测试它是使一些真正明显的发生在该断点...例如：

@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中被稍后覆盖（或者由于某些规则的特殊性）。

如果您在问题中添加更多信息，请告诉我，我会再看一次，但在此之前，这应该有助于您走上正确的轨道。

来源

2015-10-23 08:17:46

我已经看到一个错误只是看着

@media and (max-width: 300px) { 
#regScreen { 
width: 100%; 
left:0%; 
} 
}

你之前有“和”“（最大宽度：300像素）”

来源

2015-10-21 03:22:03

我不知道什么是使用元素这些选择器，但我试图做一个示例HTML解决您的问题的css参考。这里是链接jsfiddle.net/3Le34w8p/

来源

2015-10-21 03:31:35

如何使浮动页面div响应

回答

相关问题