以不同的分辨率在桌面上擴展網頁

我有一個固定佈局的網頁。它使用1280x800的標準尺寸構建而成。以不同的分辨率在桌面上擴展網頁

因爲它不需要移動兼容，並且不被公衆訪問，所以它是使用固定大小的元素構建的。

問題是，我需要它根據瀏覽器大小自動縮放。

我設法與視元標記來做到這一點，但僅適用於移動瀏覽器（我不需要......）

例如在Chrome瀏覽器中以1024x768分辨率在桌面上打開時，如何正確顯示頁面，而無需在瀏覽器中手動縮小？

謝謝！

來源

2016-02-01 Gabi

所以你想讓頁面加載縮小的分辨率？ – Voreny

，以適應每一個分辨率。不必填寫高分辨率，但可能會很好... – Gabi

我不知道這是可能的。您可以嘗試添加一些JavaScript，並在加載時獲取窗口的寬度，然後相應地放大/縮小網站。 – Voreny

替換每px與vw基於所述寬度與所述大小中的1280×800的比率。

所以，如果你有一個div與width: 1280px你可以用width: 100vw替換它。

設置以這種方式來獲取文本規模，並使用em或rem尺寸較大的文本身體的font-size。

如果您的字體大小是1280x800的16，那麼您會想要font-size: 1.25vw。

來源

2016-02-01 22:05:08

嘗試使用這個想法，但如果我有一個div內的按鈕，該按鈕是50x50。當我設置width =？vw和height =？vh時，元素比例是錯誤的... – Gabi

@Gabi你不想使用vh。使用vw，包括高度。 –

使用CSS媒體查詢以不同的屏幕寬度實現不同的樣式（響應）。以下是一些不同媒體查詢的示例。

/* Smaller than standard 960 (devices and browsers) */ 
@media only screen and (max-width: 959px) { 
} 

/* Tablet Portrait size to standard 960 (devices and browsers) */ 
@media only screen and (min-width: 768px) and (max-width: 959px) { 
} 

/* All Mobile Sizes (devices and browser) */ 
@media only screen and (max-width: 767px) { 
} 

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 
@media only screen and (min-width: 480px) and (max-width: 767px) { 
} 

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 
@media only screen and (max-width: 479px) { 
}

來源

2016-02-01 21:59:05 mbacon40

據我瞭解，您使用響應能力來根據分辨率更改頁面佈局。就我而言，佈局一定不能改變。 – Gabi

您不需要更改佈局。通過調整寬度和文本大小，調整所有內容以適應較小的屏幕。沒有魔術「縮放」選項可以修復您的網站。無論您使用媒體查詢還是百分比/寬度來解決網站上的寬度變化，您都可以有效地使網站響應。 – mbacon40

以不同的分辨率在桌面上擴展網頁

回答

相關問題