媒體查詢響應式設計

Question

我想設計網站，可以在手機和平​​板電腦上查看。我正在使用媒體查詢響應式。

我檢測最大寬度：320px，最大寬度：480px。

什麼屏幕尺寸應該檢測與媒體查詢，因爲有很多類型的設備？

Answer 1

不是試圖找出要檢測的屏幕大小，也許你可以從不同的角度來解決問題。

使用自適應設計的主要原因之一是您的網站將在所有設備上都能很好地顯示，因此請查看您的特定設計，並檢查設計和頁面佈局會發生什麼變化，和身高）。

也許你會很幸運，並有一個流暢的設計，重新配置好，那麼你甚至可能不需要使用@media查詢。

它更可能是在一定的視口或窗口尺寸，設計將擊穿，雖然這是哪裏@media查詢進來，

沒有硬性規定爲其breakbpoints您使用@media查詢，作爲一個起點Foundation使用

/* Very large screens */ 
@media only screen and (min-width: 1441px) { ... } 

/* Medium screens */ 
@media only screen and (max-width: 1279px) and (min-width: 768px) { ... } 

/* Small screens */ 
@media only screen and (max-width: 767px) { ... } 

/* Landscape Orientation */ 
@media screen and (orientation: landscape) { ... } 

/* Portrait Orientation */ 
@media screen and (orientation: portrait) { ... } 

也許你會希望增加對小屏幕的規則，但是這可能是不比任何人差。

請記住，當您的設計中斷時，@media查詢可以提供幫助，並且希望您不必在每個斷點處定義大量規則。

祝你好運！