0

我有一个弹出框，左边有通常的登录表单 - 电子邮件/密码，右边 - 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%;

}

它是扩展的 ruby​​ 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>
4

1 回答 1

2

您可以根据设备宽度使用媒体查询来获取不同的样式

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

/*your css for these devices*/

}

@media (max-width: 767px) {

  /*your css for these devices*/

}
于 2013-05-03T14:19:16.530 回答