web前端響應式網頁中的高度設計實例分析
這篇“web前端響應式網頁中的高度設計實例分析”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“web前端響應式網頁中的高度設計實例分析”文章吧。
為什么要測試高度？
對于一個設計師來說，一個不合理的假設是毀掉一個網站設計的重要因素之一。例如，假設用戶肯定是通過使用屏幕的全寬和全高瀏覽網站是不正確的。相反，我們需要考慮最壞的情況。
智米么，看明白了嗎?，F實情況是，并非所有用戶都按照我們所期望一樣使用瀏覽器。 我發現降低瀏覽器高度時網站看起來很糟糕。
瀏覽器 DevTools
調整瀏覽器的大小(垂直方向)并不是改變視口高度的唯一方法。當我們打開瀏覽器DevTools，它也會占用瀏覽器的高度。
上圖中的箭頭區域代表當前視口的高度，對于較小的筆記本電腦屏幕，我們只會看到一小部分網頁。
真正的問題是：當視口高度較小時，我們可以增強用戶體驗嗎？ 是的，有可能，我們來一起看看。
CSS 中的垂直思考
作為設計師和開發人員，我們中的一些人只關注設計的寬度變化，而忽略了視口高度變化。例如，在開發中， UI 提供了特定組件在不同視口寬度上的變化。 但是，不同的視口高度又如何呢？
在上圖中，我們有一個基于視區高度進行調整的導航菜單。。如果視口大小很小(比如，iPhone 5)，導航項將顯示為一個兩列網格。這種思維方式通常會被舍棄，或者直到有人說要做才會這么去優化。
CSS 中可以通過使用兩種不同方式來實現上面的需求：
Vertical media queries
Viewport units
Vertical Media Queries
智米么肯定知識在CSS中使用寬度媒體查詢。
@media?(min-width:?700px)?{
??.element?{
????/*?do?something..?*/
??}
}
較少使用的是垂直媒體查詢，它檢查視口高度。
@media?(min-height:?500px)?{
??.element?{
????/*?do?something..?*/
??}
}
/*?or?*/
@media?(orientation:?landscape)?{
??.element?{
????/*?do?something..?*/
??}
}
視口單位
使用視口單位可以幫助為用戶提供更好的體驗。 例如，根據視口高度控制元素之間的垂直間距。
.hero__title?{
??margin-bottom:?calc(10px?+?5vh);
}
如上所示，大比較大的屏幕（例如iMac 27英寸），下邊距就會變的很大。我們有兩種方式來解決邊距過大的問題。
Media queries
CSS comparison 函數
第一種方式（媒體查詢）受到更多支持。 如果屏幕很大，我們需要為下邊距設置最大值。
@media?(min-width:?2200px)?{
??.hero__title?{
????margin-bottom:?40px;
??}
}
另一種方法是使用CSS clamp()比較函數，clamp() 函數的作用是返回一個區間范圍的值。
.hero__title?{
??margin-bottom:?clamp(10px,?5vh,?40px);
}
用例一：重疊內容
在此示例中，有一個section 區域，其中有標題和插圖的部分, section 高度等于視口高度的100％。
一切看起來都很好，直到視口高度變小。section ?的高度將不足以容納插圖和文本內容。因此，它將與頁面上的其他部分重疊。
注意插圖與下面的部分如何重疊。 發生這種情況是因為有足夠的垂直空間。 看一下HTML和CSS。
<p?class="hero"> ??<p?class="hero__wrapper"> ????<p?class="hero__content"><!--?content?--></p> ????<img?class="hero__thumb"?src="figure.png"?alt=""?/> ??</p> </p>
css
.hero?{
??height:?100vh;
}
.hero__thumb?{
??flex:?0?0?550px;
??width:?550px;
}
下面是解決此類問題幾種解決方案：
為插圖設置固定大?。▽挾群透叨龋?，而不是僅設置寬度，缺乏高度將會繼續存在這個問題。
僅當視口高度大于
700px時才為height: 100vh（媒體查詢值可能會根據上下文而有所不同）。
我們可以將兩者結合起來，獲得更強大的解決方案。
.hero__thumb?{
??width:?400px;
??height:?300px;
??object-fit:?contain;?/*?To?avoid?compressing?the?image?*/
}
@media?(min-height:?700px)?{
??.hero?{
????height:?100vh;
??}
好的，現在我們同意使用垂直媒體查詢更好。然而，使用100vh是有風險的，因為即使我們限制了插圖的大小，也可能無法對文本內容執行相同的操作。如果文本內容變長，同樣的問題會再次發生，參見下圖：
為了解決這個問題，我們可以使用min-height而不是height。 這樣，如果內容變長，高度將擴大并且不會重疊。
@media?(min-height:?700px)?{
??.hero?{
????min-height:?100vh;
??}
}
固定頭部
在滾動時固定標題并不是一件壞事，但是，我們要確保只有在垂直空間足夠好的情況下才固定標題，這樣體驗才會好。
這是一個關于風景類的網站，這里我們可以看到，當高度過小的時候，這個固定高度整體就會占用很大的空間。這個對用戶真的重要嗎?大多數情況是不重要的，因為一般用戶不會縮小成這樣去看一個網站。當前，如果我們要優化也是可以就是，思路就是通過垂直媒體查詢，判斷高度小于某個高度的時候就將固定定位改成靜態定位。
@media?(min-height:?700px)?{
??.site-header?{
????/*?position:?fixed?or?position:?sticky?*/
??}
}
隱藏不太重要的元素
我在Twitter.com的導航欄上注意到了這個模式。其思想是將垂直媒體查詢和Priority+模式結合起來。
調整視口高度的大小時，次重要的元素（書簽和列表）將被刪除并附加到“更多”菜單中，這是垂直媒體查詢的一個很好的用例。
.nav__item--secondary?{
??display:?none;
}
@media?(min-height:?700px)?{
??.nav__item--secondary?{
????display:?block;
??}
}
減少間距-導航
如果我們網站有側邊欄或側邊欄，當視口高度很小時，我們可以減少一些導航項之間的垂直間距，這也會增強整體設計。
.nav__item?{
??padding-top:?4px;
??padding-bottom:?4px;
}
@media?(min-height:?700px)?{
??.nav__item?{
????padding-top:?10px;
????padding-bottom:?10px;
??}
}
模態框
我們知道，模態框至少應該水平居中。但是，有時我們還需要垂直居中，我們一般會使用下面的方案：
.modal__body?{
??position:?absolute;
??left:?50%;
??top:?50%;
??transform:?translate(-50%,?-50%);
??width:?500px;
}
但是，當內容變長時就會有問題，模態框會垂直填滿屏幕，用戶將無法滾動它。
引發這種情況下，有幾點原因：
模態框沒有高度
模態垂直居中（這會問題更快的出現）
下面是修復后的 css:
.modal__body?{
??position:?absolute;
??left:?50%;
??top:?3rem;
??transform:?translateX(-50%);
??width:?500px;
??min-height:?200px;
??max-height:?500px;
??overflow-y:?auto;
}
@media?(min-height:?700px)?{
??.modal__body?{
????top:?50%;
????transform:?translate(-50%,?-50%);
??}
}
注意，我使用了min-height和max-height。 min-height是即使內容很短也要保持模態看起來好，max-height是使用特定值限制其高度，而不是添加固定的高度。
以上就是關于“web前端響應式網頁中的高度設計實例分析”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注蝸牛博客行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
評論