Question

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

Answer 1

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

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

/*your css for these devices*/

}

@media (max-width: 767px) {

  /*your css for these devices*/

}

可靠的造型适合不同的屏幕尺寸

1 个答案: