不同屏幕尺寸的可靠造型

我有一个弹出框，左边是通常的登录表单 - 电子邮件/密码，右边是FB登录按钮。我使用内联块显示div（主要是因为我想在常规登录窗体和FB按钮之间的边界）。问题是，我觉得有些东西不好（我对CSS非常没经验），而且我决定尝试在另一台笔记本电脑上显示效果（屏幕比较小），而且这完全是灾难 - 所有是搞砸了。帮助我重构我的造型。在这种情况下，它应该像桌子一样？不同屏幕尺寸的可靠造型

.sign_in { 
    display: none; 
    position: fixed; 
    top: 30%; 
    left: 28%; 
    border-style: solid; 
    border-width: 3px; 
    border-color: #c1ffc6; 
    background: #fff; 
    padding: 2%; 
    width: 40%; 
    height: 25%; 
    font-family: Arial, sans-serif; 
    z-index: 9999999; 
    font-size: 14px; 


} 
.signs_form{ 
    margin-top: 5%; 
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif; 
    display: inline-block; 
    border-right-style: solid; 
    padding-right: 10%; 
    border-width: 1px; 
    border-color: #c1ffc6; 


} 
.fb_sign { 

    display: inline-block; 
    vertical-align: 100%; 
    margin-left: 10%; 


} 
#sign_in_fb { 
    vertical-align: 100%; 

}

被延长红宝石HTML文件：

<div class = "sign_in" > 
<div id="close"> <%= link_to('X','#', :id=>'close_sign_in_popup', :remote=>true)%> </div> 
<%= form_tag sessions_path, :class=>'signs_form', :remote=>true do %> 
    #so on 
<span class="fb_sign"> 
</span> 
</div>

来源

2013-05-03 Joe Half Face

任何机会的jsfiddle获得不同的风格？也发布相关html – Morpheus 2013-05-03 14:16:43

你也需要发布你的HTML。 – 2013-05-03 14:16:57

将px更改为px，然后在不同的屏幕尺寸上显示相同。如果你想进一步谷歌响应式设计，那么你覆盖所有设备。我很确定你的情况下的z-index是无用的。如果为body元素声明font-family，则所有元素都将使用它，因此不需要在其他类中重复使用。 – sylwia 2013-05-03 14:18:45

您可以使用媒体查询根据设备宽度

@media (min-width: 768px) and (max-width: 979px) { 

/*your css for these devices*/ 

} 

@media (max-width: 767px) { 

    /*your css for these devices*/ 

}

来源

2013-05-03 14:19:16 mguimard

不同屏幕尺寸的可靠造型

回答

相关问题