在桌面瀏覽器上調整視口大小

Question

我有一個客戶想要一個響應性網站，以適應從1400px寬到960px寬的屏幕。 小於此值的任何內容都可以顯示水平滾動條。 該位置必須保持與屏幕左右邊緣齊平。

最初，我認為使用媒體查詢，一些javascript和其他現代的“響應式”技術可以很容易地做到這一點。 我走了那條路，雖然這是我第一次體驗功能完善的響應式網站，但並不太困難。 我必須對圖像，標題大小，文本大小等進行動態調整大小。很多工作和測試都值得，但值得。 或不？？！！

現在，我意識到移動式野生動物園實際上已經內置了這項技術。通過調整視口大小。 這就是為什么在iPad上同時具有960px和1200px寬度的網站都將捕捉到瀏覽器窗口邊緣的原因。

我的問題是“是否有可能像在iOS中使用移動瀏覽器一樣模擬桌面瀏覽器中的視口大小調整？”

Answer 1

一種，使用百分比或ems，例如

body{
    width: 100%; 
}
content{
    width: 60%;
    float: left;
}
sidebar{
    width: 35%;
    float: right;
}

然后您可以使用媒體查詢使用ems調整文本大小