響應式設計是否有一些「最佳方法」？

Question

我需要做一個respponsive網站項目，並有一些疑惑。

我在學習媒體查詢，但有很多媒體查詢，有像我們可以遵循的「默認媒體查詢」或「常見媒體查詢」？

經過一番研究即時通訊思想有所瞭解：

@media only screen and (min-width: 480px) { ... } 
@media only screen and (min-width: 600px) { ... } 
@media only screen and (min-width: 768px) { ... } 
@media only screen and (min-width: 992px) { ... } 
@media only screen and (min-width: 1382px) { ... } 

你認爲是使用該媒體查詢的好方法嗎？

對於responsiv設計做你認爲它更好地使用CSS中的百分比或使用像素更好嗎？我問這個，因爲媒體查詢使用像素，所以也許它更好的不使用百分比？

最後，我有一個計算機全高清分辨率和其他1024分辨率。我有一個300像素的圖像，在我的全高清顯示器中，圖像比我的1024計算機更小。我不明白這一點，因爲300像素應該是300像素總是沒有？

對不起，如果我問很多事情，但我有一些疑惑，並不容易找到有關這個好的和可靠的信息！

Answer 1

我使用您注意到的媒體查詢設置會使您的生活複雜化，因爲它們會使定位不同的視口或窗口寬度變得困難。

@media只有屏幕和（最小寬度：480像素）{...}將針對所有寬度480像素以上，
@media只有屏幕和（最小寬度：600px的）{... }將以600px及以上的所有寬度爲目標。

因此，他們都將成爲控制戰鬥每當視爲600像素或更高。你可以考慮如下：

/* your default, site-wide settings followed by */ 
@media only screen and (max-width: 480px) { ... } 
@media only screen and (min-width: 481px) and (max-width: 600px) { ... } 
@media only screen and (min-width: 601px) and (max-width: 768px) { ... } 
@media only screen and (min-width: 769px) and (max-width: 992px) { ... } 
@media only screen and (min-width: 993px) { ... } 

我並不是說這些都是完美的斷點，這通常是特定於您的設計。重要的是你用來瞄準不同視口的技術。

有思想像素VS百分比不同的學校，並且都具有優勢。如果你起牀到速度與響應式設計，我個人認爲這是值得花時間與一些像Bootstrap或Foundation或Skeleton或許多其他的一個完善的框架。

他們都是夢幻般的，他們會爲您節省學習時間堆，給你很好的跨瀏覽器的結果，你知道的越多，就越容易在需要的時候向他們割捨。

祝你好運！

Answer 2

什麼是像素密度，以及它如何幫助我理解爲什麼手機上的相同圖像比我的電腦顯示器上的更小（反之亦然）？

比方說，我有一個500 x 500像素分辨率的顯示器，該顯示器的屏幕尺寸是15「對角線，我有一個手機具有相同的分辨率，但它的屏幕尺寸是4」對角線（只是一個例）。

怎樣才能在不同的屏幕尺寸下適合相同數量的像素？

答案很簡單：的像素是我的手機上小於它是我的顯示器上（這是蘋果的視網膜顯示屏和其他顯示器之間最大的區別）。

---

媒體查詢...

參加一個very simple blog that I've developed last year看看。嘗試調整瀏覽器寬度以查看內容，圖像和幻燈片的變化。

當瀏覽器/屏幕寬度小於800個像素，整個網站的變化本身更好地較小的屏幕相適應。這是我認爲你應該使用媒體查詢的方式，而不是爲每個設備屏幕尺寸（但不一定使用800像素，也不限制在大屏幕上的內容max-width）創建規則。

_{請注意，這只是關於如何思考媒體查詢的一個示例。}

Answer 3

普萊斯嘗試以下媒體查詢： -

/* Large desktop */ 
@media (min-width: 1200px) { ... } 

/* Portrait tablet to landscape and desktop */ 
@media (min-width: 768px) and (max-width: 979px) { ... } 

/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 

/* Landscape phones and down */ 
@media (max-width: 480px) { ... } 

Answer 4

這裏是給你一些參考：

• 你可以閱讀http://bradfrostweb.com/blog/post/7-habits-of-highly-effective-media-queries/媒體查詢 - 我喜歡這個報價

先從小屏幕開始，然後展開，直到看起來像 狗屎。時間到了斷點！ -Stephen乾草

基本上你應該使用流動佈局（你可以從各種CSS流體網格，你在網上找到的選擇），並測試您的設計放大和縮小瀏覽器：當你設計「裂縫」，它的時間添加媒體查詢。你沒有在一個特定的斷點重新調整整個網站：一切都可以正常工作，你只需要調整文本的寬度。這樣做。

• 關於像素密度和resolutionyou可以閱讀這篇文章很有用：http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

希望這有助於

Answer 5

你或許應該停止思考的像素和屏幕尺寸的網頁。

我可以看到爲什麼使用實際設備寬度作爲設計的斷點，但請記住這些斷點將是無效的第二個新設備發佈。或者當用戶以意想不到的方式與網站交互時，例如將文本大小調整爲他們的偏好。

1. 使用em單位爲您的斷點。這樣，即使用戶調整文本大小，您的媒體查詢也會正確觸發。

2. 調整你的斷點來當你的內容/佈局需要它，而不是針對特定的屏幕尺寸（這麼說，你可能不應該包括上述980上下的像素緊湊型（移動）導航，因爲人老顯示器可能不會理解如何瀏覽它）。

3. 寫移動第一個CSS，因爲在使用min-width您的媒體查詢。這有助於保持CSS乾爽。然而，而不是意味着你永遠不應該使用max-width進行媒體查詢 - 當你只想將樣式添加到更小的屏幕時，總是有場景。總是避免重複。

4. 爲了您自己的理智，請使用CSS預處理器，如SASS,LESS或Stylus。我最近寫了一篇關於如何使用SASS獲得一個非常舒適的媒體查詢工作流的解答，click here here來閱讀它。

5. 像素密度是一個複雜的話題，但渲染的像素（如圖像，或與CSS的任何東西）不是在屏幕上一樣實際像素 - 他們是規範化爲標準。因此，您不應該使用像素密度來提高圖像的質量，您應該增加圖像的寬度，因爲這些額外的像素會被塞進更高分辨率的屏幕。