試圖讓我的網站在所有設備上響應，尤其是在手機上

Question

我試圖讓我的網站在所有設備上響應，尤其是在手機上，但我不知道如何實現。 我也嘗試過不同的斷點，但它不起作用。 建議我一些讓它響應的方法。

Answer 1

添加一個簡單的<meta name="viewport" content="width=device-width, initial-scale=1">應該有助於添加一些縮放修復。

Answer 2

你有很多方法，其中兩個是：

選項一：純CSS

通過使用@media ，您可以確定瀏覽器大小並為不同的瀏覽器大小編寫不同的 CSS

@media only screen and (min-width:768px){
   Selector{
       Prop: Value;
   }
}

選項 2：

您可以使用像 Bootstrap 這樣的響應式 CSS 庫並使用其網格布局，

BS 將每個容器元素（如每個分區）視為 12 列，您可以為不同的設備設置不同的列

<div class="col-12 col-md-6" ></div>

例如，在這個簡短的代碼中，我說過我的部門應該采用 Bootstrap 的所有 12 個可能的列，但是，在中型設備 (md) 中它應該只采用 6 列（頁面的一半），而在 bs 中（直到版本 5）是大於 768px 的設備