自動將固定寬度版式調整為適合屏幕寬度

Question

我有一個寬度固定的網站，無法輕易更改。 它的寬度約為1300像素，因此在較小的屏幕上渲染效果不佳。

我正在尋找一種解決方案，即使在小屏幕上也可以使網站看起來不錯。 這應該是可能的，因為如果用戶將瀏覽器的縮放級別更改為75％之類的東西，則一切看起來都會很好。 但是我讀到，無法在JavaScript中更改瀏覽器縮放級別，並且此功能的行為在瀏覽器之間不一致。

是否有解決此問題的標准解決方案（庫或其他工具）？

Answer 1

您已經在標簽中添加了“響應”標簽。 這意味着您知道您想要一個響應式網站。

您可以在特定寬度上創建媒體查詢，並將zoom屬性設置為適當的值（但Firefox不支持此功能： http : //caniuse.com/#search=zoom ；您可以使用transform：scale（）作為后備）。

例：

@media (max-width: 600px) {
  body {
    zoom: 0.75;
    moz-transform: scale(0.75, 0.75);
  }
}

最好的解決方案是在特定寬度上創建中介查詢，並努力更改元素的寬度。 我不明白為什么寬度不能輕易改變。

例：

@media (max-width: 600px) {
  .myElement {
    width: 600px; /* whatever, maybe 100%? */
  }
}

Answer 2

首先，將此meta標簽包含在頁面的<head> ：

<meta viewport="width=device-width, initial-scale=1.0">

以上內容將迫使網站在移動設備上擴展。 但是您需要使用媒體查詢做更多的工作

您可以為不同的屏幕尺寸創建不同的規則：

@media(max-width: 768px){
    /** Small Mobile Screens */
}

@media(min-width: 768px){
    /** Large Mobile Screens, tablets e.t.c */
}

@media(min-width: 992px){
    /** Desktops, Laptops */
}

@media(min-width: 1200px){
    /** Larger Screens (Desktops, Laptops, e.t.c) */
}

您可以為每個屏幕將頁面寬度設置為不同的像素大小

自動將固定寬度版式調整為適合屏幕寬度

問題描述

2 個解決方案

解決方案1
1 已采納 2016-04-28 08:34:29

解決方案2
1 2016-04-28 08:40:53

自動將固定寬度版式調整為適合屏幕寬度

問題描述

2 個解決方案

解決方案1 1 已采納 2016-04-28 08:34:29

解決方案2 1 2016-04-28 08:40:53

解決方案1
1 已采納 2016-04-28 08:34:29

解決方案2
1 2016-04-28 08:40:53