我無法獲得移動視口的行爲和正確縮放

-2

我需要某人查看我的網頁上的來源，並請告訴我爲什麼移動版本繼續打開大，只需手動縮小。我需要它以正確的尺寸打開並保持這種尺寸。請以下鏈接查看源：我無法獲得移動視口的行爲和正確縮放

注：我覺得我已經試過幾乎所有的元視口版本也都沒有運氣。我覺得問題可能會更深，但我無法確定它。請幫我弄清楚這一點，以便我可以繼續我的生活。

爲什麼要使用一個固定的無線dth爲您的視口？嘗試將'更改爲''，然後在媒體查詢中爲'＃Container'使用百分比值（'width：90％;'）。 – Alex

我剛剛做到了，如果你在將它改回去之前快速查看，你可以看到它看起來有多麼破壞 – WillingLearner

你必須做很多工作才能實現一個響應式網站。例如，在媒體查詢中，將所有元素的寬度值更改爲具有固定值的百分比值。 – Alex

看起來你的＃容器風格沒有在你的400px媒體斷點上使用百分比。此外，字體大小爲1.5em

2016-01-15 04:52:26 jshotz

我試圖使用百分比，整個佈局爆炸。所以我只是把它設置爲1000px – WillingLearner

有很多東西需要修復。但是這裏有一個快速列表。將所有寬度更改爲百分比，#Headline中的背景圖像嘗試background-size：cover – jshotz

#Container您的#Container無論視口是什麼，wrapping div的設置寬度均爲1000px。另外我沒有看到任何媒體查詢被使用？

嘗試添加媒體查詢，所以它的寬度減少視口比例降低：

@media (max-width: 991px) { 
    #Container { 
     width: 720px; 
    } 
}

添加另一個較小的視口，也許是這樣的#Container跨越視這< = 767px的整個寬度：

@media (max-width: 767px) { 
    #Container { 
     width: 100%; 
    } 
}

您可以添加和定製，只要你喜歡儘可能多的...這是一個有益的指導：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

2016-01-15 09:06:29

回答