Надежный стиль для разных размеров экрана

Question

У меня есть всплывающее окно, слева есть обычные формы входа - адрес электронной почты/пароль, справа - кнопка входа в FB. Я использовал divs с встроенным отображением блоков (главным образом потому, что я хочу быть границей между обычной формой регистрации и кнопкой 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> 

Answer 1

Вы можете использовать медиа-запросы, чтобы получить различные стили в зависимости от ширины устройства

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

/*your css for these devices*/ 

} 

@media (max-width: 767px) { 

    /*your css for these devices*/ 

}