移動第一響應式設計

我目前正在重做我的CSS和其他東西需要使我的自適應網站響應 - 直到現在我設計我的網站爲我的筆記本電腦，然後縮小，現在我從另一邊做。移動第一響應式設計

我已經設法讓網站在319x480上看起來不錯，現在我要去看看我的第一個斷點在哪裏：你究竟如何去做這件事？我是否應該只調整窗口的水平尺寸並查看需要中斷的位置，還是應該垂直進行調整？從教程我看到他們總是隻是橫向談論，但是你錯過了一些東西呢？

此外，現在它在縱向模式下看起來不錯。比方說，我將在600px寬度爲縱向製作一個斷點，並在1000px處製作一個斷點並且就是這樣。那麼我是否應該在回到319x480之後再次轉向景觀並再次擴展該網站併爲景觀模式找到新的斷點？

你是如何以一種有條不紊的方式來解決這個問題的？我認爲這是一個非常酷的設計方法，我真的想學習如何正確地做。

謝謝！

2017-04-06 emcolsson

歡迎來到SO請閱讀[如何問]（http://stackoverflow.com/questions/how-to-ask），[「我可以問什麼問題？」]（http：// stackoverflow。 com/help/on-topic）和[「我應該避免問什麼類型的問題？」]（http://stackoverflow.com/help/dont-ask）。你的問題在這裏非常廣泛。 – Darren

不要擔心垂直。您多久不必在桌面上滾動？在較小的屏幕上不常出現，幾乎從不出現。專注於水平，做你說的話，調整大小，看看哪些地方需要調整。縱向和橫向與橫向調整瀏覽器大小相同。有些使用通用智能手機，桌面和桌面斷點，但不是必需的。即使在使用這些常規斷點時，仍然會發現需要調整的點。 – hungerstar

Best se bootstrap –

如果您先做移動設備，則希望使用最小寬度媒體查詢。桌面首先使用最大寬度。專注於寬度而不是垂直高度，就像您要求的一樣，如果瀏覽器窗口高度已調整大小，則滾動條通常很合適。你不希望人們必須通常水平滾動。

例子：

.header-title { 
    font-size: 14px; 
} 

@media screen and (min-width: 600px) { 
    .header-title { 
     font-size: 16px; 
    } 
} 

@media screen and (min-width: 1024px) { 
    .header-title { 
     font-size: 18px; 
    } 
}

來源

2017-04-06 14:19:52 StefanBob

所有主要的斷點，你可以在瀏覽器控制檯檢查。在這裏你可以看到，通常只有寬度發生變化。可能垂直調整大小不會影響你的頁面太多

來源

2017-04-06 14:22:29

一般來說CSS斷點是水平的，因爲響應式有一個「流」佈局。例如，如果您的網格佈局並排放置3張照片，並且您的瀏覽器太窄而無法顯示所有這些照片，則應將其疊放在一起，以便視圖可以滾動瀏覽它們。

以多種尺寸和縱橫比測試您的網站總是一個好主意，特別是在使用固定/絕對位置或計算高度的情況下。

來源

2017-04-06 14:23:21 ssylviageo

移動第一響應式設計

回答

相關問題