自動適合固定寬度佈局到屏幕寬度

我有一個固定寬度佈局的網站，並且不能輕易更改。它的寬度大約爲1300像素，因此在較小的屏幕上不能很好地呈現。自動適合固定寬度佈局到屏幕寬度

我正在尋找一個解決方案，使網站看起來不錯，即使在小屏幕上。它應該是可行的，因爲如果用戶將瀏覽器縮放級別更改爲75％等，則一切看起來相當不錯。但我讀到，JavaScript中不可能改變瀏覽器的縮放級別，而且這個功能在瀏覽器中的行爲並不一致。

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

來源

2016-04-28 Arnaud

你可以用css來實現：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp爲你想要的尺寸添加斷點並覆蓋你的css。 – Petroff

是的，我知道這個規則，但我將不得不改變很多CSS屬性......沒有一個解決方案可以輕鬆地做到這一點，並以一種適用於所有屏幕尺寸的方式，而無需更改大量代碼？就像在Chrome中實現的縮放一樣。 – Arnaud

'' – pawel

您已將標籤「自適應」放入您的標籤中。這意味着你知道你想要一個響應式網站。

您可以創建特定寬度的mediaqueries和設置縮放屬性設置爲一個合適的值（但Firefox不支持這一點：http://caniuse.com/#search=zoom;你可以使用變換：規模（）作爲備用）。

例：

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

最好的解決辦法是建立在特定寬度的mediaqueries並採取改變元素的寬度的的努力。我不明白爲什麼寬度不能輕易改變。

例：

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

來源

2016-04-28 08:34:29

太棒了！「縮放」規則就是我一直在尋找的。我真的認爲對我來說這是最好的解決方案：快速實施，結果看起來不錯。 – Arnaud

一開始包括這meta標籤頁面的<head>：

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

以上將迫使網站在大規模的移動設備。但是，你需要做的使用media queries

您可以創建不同的屏幕尺寸不同的規則更多的工作：

@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) */ 
}

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

來源

2016-04-28 08:40:53 dimlucas

自動適合固定寬度佈局到屏幕寬度

回答

相關問題