不同屏幕尺寸的可靠造型

我有一個彈出框，左邊是通常的登錄表單 - 電子郵件/密碼，右邊是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

不同屏幕尺寸的可靠造型

回答

相關問題