響應式設計

Question

我們是否具有響應式設計的標準尺寸？一般來說，我認爲這將是手機，平板電腦，iPad，筆記本電腦，臺式機的尺寸。但是現在我遇到了很多與我的客戶有關的問題，他們抱怨說4.5英寸的屏幕設計不好，三星手機等設計不好，這是我的錯誤嗎？我們是否有標準尺寸的反應。design.So，我可以解釋給我的客戶請建議

Answer 1

我總是帶mediaquery模板開始：。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 
/* Styles */ 
} 

Answer 2

也許你可以考慮使用Restive Plugin它的建成，解決你的那種挑戰與建設多個設備的網站。

您也可以檢查出Getting Started with Restive Plugin博客文章，其中介紹如何在現實生活中的Web設計場景中使用它。

完全披露：我開發了插件。

Answer 3

如果您使用Bootstrap，那麼會出現問題，它會自動調整所有移動設備和分辨率。

轉到此鏈接並下載引導程序，您將獲得引導程序css和js文件，它將在您的應用程序或網絡中工作。

http://getbootstrap.com/getting-started/#download

使用它，如果你需要那麼任何幫助，請給我

感謝

Answer 4

有沒有真正的標準尺寸爲響應式設計，將正常工作。最好的方法是設計你的內容，而不是設備。並設計移動優先。

通過手機優先，默認的CSS將自動定位到較小的屏幕，並從那裏構建您需要逐漸變大的屏幕。

和開發明智的是，使用@min-width(insert px)建立你的樣式表在移動優先的方式。