媒體通過寬度和高度來管理樣式的查詢模式

我最近使用fullpage.js包製作了一個網站，這基本上會將網站的各個部分分解爲靜態大小的頁面，並將其大小設置爲視口的完整大小。媒體通過寬度和高度來管理樣式的查詢模式

這意味着每個部分的所有內容必須適合視口大小。內容不會溢出，因爲用戶的任何滾動都會將頁面移動到下一部分。

這一切都很好，但我對如何讓網站響應各種屏幕尺寸留下了一些挑戰。我最終做的是將我的css設計爲一個非常小的空間，然後對於更寬/更高的屏幕，我將設置媒體查詢以使文本變得更大以佔用更多空間。

但是，我發現我的範例充滿了錯誤。儘管努力獲得所有可能的屏幕尺寸配置，但我仍然遇到了文本在視口範圍之外流動的問題。另外，必須考慮所有的排列組合是非常「沉重的」，並不是很優雅，並且讓我覺得我沒有想出一個好的解決方案。

必須有一個更直觀的媒體查詢模式來管理。想知道別人做了什麼。

來源

2015-12-02 gdbj

我會說在處理fullpage.js時最簡單的解決方案是利用插件提供的responsiveWidth或responsiveHeight選項。

這與一些強制該部分高度的自動大小的CSS結合使用會更容易。

.fp-section, 
.fp-slide, 
.fp-tableCell{ 
    height: auto !important; 
}

在this site看看使用fullpage.js，看看第二部分是如何變大的小的寬度，以解決空間的問題。你可以看到http://burntmovie.com/

非常相似的關於媒體查詢的時候，不要忘了你還可以使用width和height條件對相同的風格：

@media screen and (max-width: 890px) and (max-height: 680px) { 
    #section3 img{ 
     bottom: -50px; 
    } 
}

這可以在fullpage.js demo page看到。

來源

2015-12-04 11:05:39 Alvaro

ahhh ...響應選項可能是我最初想要的。很高興知道。 Fullpage是你的工作？真的好東西！ – gdbj

我添加了我的答案，但我想，您的答案中有更多有趣的信息。 – gdbj

可能與fullpage.js一起處理這個問題是不可能的。但是，試圖通過DIV像下面來包裝一個部分的內容：

HTML：

 

    <div class="block"> 
     (...) 
    </div>

CSS：

 

    .overflow-block { 
     max-height: 80%; 
     overflow-y: auto; 
    }

這不正是你問什麼，但這種方法就會使可以使用容器的滑塊滾動該塊。

來源

2015-12-02 20:35:33

我的問題真的集中在如何利用CSS和媒體查詢來管理我的內容樣式。一般來說，依靠溢出並不是一個好主意，但對於fullpage.js包也不適用。 – gdbj

其他人都在尋找解決方案的技術細節，但我一直在尋找這種模式。經過一番思考，我相信我有我正在尋找的答案。答案可能很簡單，但由於某種原因，當我接近它時，我開始掙扎。

對於一個靜態設計的網站設計的網頁是全屏顯示，設計將有寬高比的寬高比。至少，我的設計師根據隱含的屏幕比例生成設計。根據該比例構建寬度和高度的媒體查詢將確保內容在屏幕調整大小時看起來不錯。

如果寬度或高度根據比例遠離重擊，則可以進行較小的更改以進行調整，但沿着主軸佈置大部分響應式設計是我開始的地方。

對我來說，設計是基本方，所以我我的結構化查詢，例如：

@media (min-width: 501px) and (min-height: 501px) {} 
@media (min-width: 701px) and (min-height: 701px) {} 
@media (min-width: 901px) and (min-height: 901px) {}

起初，我還嵌套媒體查詢，並且它變得瘋狂和醜陋。這使得它更簡單直觀。

來源

2015-12-05 17:53:09 gdbj

媒體通過寬度和高度來管理樣式的查詢模式

回答

相關問題