以賬戶屏幕大小顯示Django網站

我有點迷路CSS處理爲了管理樣式表約screen size。我正在開發一個Django網站項目，我正面臨一個非常微妙的情況。以賬戶屏幕大小顯示Django網站

我的項目是在非常好的屏幕（Retina屏幕）上以非常高的分辨率開發的。但是，當我以非常糟糕的屏幕分辨率觀看我的項目時，某些元素並不處於應該出現的位置。

我把例如部分從對應於HTML基本模板.css文件：

/* ############################################# */ 
/* CSS File about Home application properties */ 
/* ############################################# */ 

@import url("http://bootswatch.com/flatly/bootstrap.min.css"); 

/* If screen less than 1440px */ 
    @media screen and (max-width: 1440px) { 
    .navbar-right { 
     /*padding-left: 250px;*/ 
     position:absolute; 
     right:2%; 
    } 
} 
    /* If screen bigger than 1440px */ 
    @media screen and (min-width: 1450px) { 
    .navbar-right { 
     /*padding-left: 400px;*/ 
     position:absolute; 
     right:2%; 
    } 
} 

/* Define background color from upper navbar */ 
.navbar-inverse { 
    background-color: #007A5E !important; 
    } 

/* DatasystemsEC tab */ 
.navbar-inverse .container-fluid .navbar-header .navbar-brand { 
    color : white; 
    } 

/* Tab properties from navbar */ 
.navbar .nav > li > a { 
    color: white; 
    } 

footer { 
    text-align: center; 
    margin-top: 35%; 
}

我怎麼能以適應該文件的屏幕分辨率處理CSS樣式表？

你能告訴我什麼是在以下思路正確或錯誤：

我只寫％，而不是PX爲了考慮到屏幕分辨率
我必須寫CSS文件中首先對之間的屏幕分辨率和b，然後和ç b之間，...

例如，我的Django網站中的主要內容對應於class = "col-sm-8"。我添加了margin-top = -68%，以便將內容恰好放置在我想要的位置。但與我的朋友的屏幕，同一塊不是它應該。

我真的很新的CSS（和Django太），因爲我在學習的同時，我正在編碼，以實現我的項目。

謝謝你，如果你能幫我解決這個問題。

來源

2017-02-24 Deadpool

目前的共識是網絡發展的「移動優先」。這意味着從最小的屏幕尺寸開始，最大化。 Bootstrap就是這樣。

爲了決定什麼是最適合您項目的media查詢，請參閱MDN上的this tutorial和this documentation。由於您使用的是Bootstrap，因此我會建議您遵循相同的breakpoins以避免不一致。

此外，考慮使用vw和vh而不是百分比，適當時（我相信這可能是margin-top問題的一部分）。百分比與容器的尺寸有關。 vw和vh與視口的寬度和高度有關（see in MDN）。

來源

2017-02-24 14:51:12 4140tm

這是一個非常有用的答案！我不知道所有這些事情，我真的贊同你的幫助和建議！ – Deadpool

以賬戶屏幕大小顯示Django網站

回答

相關問題