使用視口進行響應而不是媒體查詢

我的wordpress主題和我已經安裝的插件相互衝突，迫使我做我自己的CSS編碼。在Chrome上使用CSS和檢查元素工具玩弄遊戲後，我修復了我的網站thevandreasproject.com的響應能力（並非真正固定，更像是被黑客攻擊，我猜...）。我用這個代碼，使其iPhone 5的屏幕上運行：使用視口進行響應而不是媒體查詢

@media (min-width: 680px) { 
    .home-background .textwidget { 
     font-size: 50px; 
     font-style: normal; 
     font-weight: 500; 
     letter-spacing: 8px; 
     font-family: 'Roboto'; 
     min-height: 880px; 
     padding-top: 20px; 
    } 
} 

@media (max-width: 679px) { 
    .home-background .textwidget { 
     padding-top: 20px; 
     padding-bottom: 175px; 
     font-style: normal; 
     font-weight: 500; 
     font-family: 'Roboto'; 
    } 

.site-content { 
    height: 0!important; 
    } 
#footer-banner { 
    padding:50px; 
    } 
}

我在想，如果有人可以幫助我弄清楚如何正確地重新調整我的圖像和文本的所有設備，而不必弄清楚媒體查詢對於每個設備都有。我很感激！

來源

2015-11-14 Sam

是的谷歌響應式設計，基本上你可以使用％寬度/高度/邊距或VW，例如， 'width：100vw;'應該是屏幕的寬度。用文字保留px，否則在小屏幕上顯示得太小。但是在大多數情況下，如果切換到％，則您應該爲所有帶有少量規則的設備進行4/5媒體查詢。我使用http://mobiletest.me/獲取不同的屏幕尺寸，但基本上媒體查詢爲400,600,800和1000.它在90％的時間內都能很好地工作。但請仔細閱讀，您需要爲父容器定義高度，以便按預期工作等。 – David

謝謝。你介意指出是什麼讓網站不響應？另外，爲什麼沒有和我一樣問題的人（見下面的鏈接）不得不按照我的方式去解決問題？ https://siteorigin.com/thread/page-builder-background-image-wont-rescale-for-mobile-devices/ – Sam

我認爲像px一樣測量像cm，20px總是相同的大小。但是，屏幕尺寸的20％將會縮放（確保您的視口語句正確）並始終保持20％的屏幕尺寸。等等。 – David

從可以想象的最小屏幕尺寸開始，然後展開視口，直到看起來像垃圾。放入一個斷點。重複處理，直到達到您想要容納的最大屏幕大小。我認爲Dave Rupert在某個地方說過。無論如何，簡短的答案是不要使用基於流行設備的媒體查詢，而是基於您的內容。沒有簡單的答案。

來源

2015-11-14 03:14:17 cijanzen

使用視口進行響應而不是媒體查詢

回答

相關問題