創建響應式佈局

Question

我正在嘗試使用bootstrap創建響應式網頁，但我對如何開始感到困惑。任何人都可以幫助我邁向正確的方向？

這裏是我的代碼
https://jsfiddle.net/c30a7bd2/
It should be responsive for all the devices.

Answer 1

儘管downvotes，這裏的一些信息，讓你開始。

過程：

設計從最小的視口最大。即先爲移動設備設計縱向，移動橫幅，平板電腦縱覽，平板電腦橫向，然後是最小的桌面，然後是最大的桌面。如果您查看Chrome開發工具，您會在箭頭圖標的左上角右側看到一個圖標。這使瀏覽器進入響應式設計模式，列出最常見的設備。很有幫助。

瞭解媒體查詢：

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

有一個關於如何正確使用@media查詢很多愚蠢的混亂。讓我從一開始就設定你的權利。

您只需要擔心最小寬度。不要考慮範圍，除了最小寬度之外不要使用其他任何東西。

這是爲什麼。

因爲我們正在編寫我們從最小的設備CSS寬度第一，作爲瀏覽器的寬度增加所有我們正在做的是覆蓋先前設置的風格。而已。這實際上是做出優秀，簡單的響應式css編碼的祕訣。

什麼斷點使用：

再次，很多聰明的工程師試圖太聰明。他們引入了奇怪的斷點，儘量避免像素'px'的定義等。停止這樣做。

請記住，由於我們首先編寫我們的代碼移動肖像（最小的設備尺寸），因此不存在媒體查詢。它只是CSS。

下面是你應該開始斷點：

/* all mobile portrait coding goes first */ 

@media all and (min-width: 480px) { 
    /* this is the most common mobile landscape minimum width */ 
} 

@media all and (min-width: 768px) { 
    /* this is the most common minimum tablet width */ 
} 

@media all and (min-width: 1024px) { 
    /* this is the most common minimum desktop width. It also is the 
    most common minimum tablet landscape width. */ 
} 

@media all and (min-width: 1300px) { 
    /* this is the most common minimum wide desktop width. 
    This is the only media query you might consider setting to 1200px 
    if your graphic design requires it. */ 
} 

就是這樣。這實際上就是您開始編寫出色的響應式CSS所知道的一切。

只記得關鍵概念是利用繼承。你的CSS的80％應該首先寫入移動肖像大小。所有這些樣式都會繼承到更寬和更寬的屏幕寬度。然後根據需要爲新的更寬屏幕覆蓋它們。你會發現，隨着媒體查詢的增加，它們中的css越來越少。

玩得開心，寫出優秀的代碼！