針對不同窗口/屏幕尺寸的響應式網頁

Question

因此，我在TripAdvisor中遇到了web page頂級旅行目的地。如果您更改瀏覽器窗口大小，UI將優雅地更改以適應新的窗口大小。字體大小，元素的寬度，所有內容都相應地變化以適應wimdow大小。

任何人都可以告訴我如何去建立這些響應式網頁？

我知道這個問題範圍太廣泛，但我只是想知道是否有任何框架構建這樣的網頁。

Answer 1

您需要使用@media規則根據頁面的寬度更改您的內容。或者，您可以通過交換一些'px'測量結果並使用'％'測量來「變形」您的網站。

我建議你在做出現在的響應之前創建一個簡單的響應式網站來練習。

您還需要添加元標記，以使內容在移動設備上具有合適的大小。

這通常是卓有成效的：

<meta name=viewport content="width=device-width, initial-scale=1"> 

幫助@media標籤： http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

上查看端口信息： https://developers.google.com/speed/docs/insights/ConfigureViewport

Answer 2

您可以使用CSS媒體查詢爲不同的屏幕尺寸

@media (max-width: 1024px) {} 
@media (max-width: 768px) {} 
@media (max-width: 480px) {} 
@media (max-width: 320px) {}