這篇“web前端響應(yīng)式網(wǎng)頁中的高度設(shè)計(jì)實(shí)例分析”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“web前端響應(yīng)式網(wǎng)頁中的高度設(shè)計(jì)實(shí)例分析”文章吧。
創(chuàng)新互聯(lián)，為您提供重慶網(wǎng)站建設(shè)、重慶網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對(duì)服務(wù)資質(zhì)代辦等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！
為什么要測(cè)試高度？
對(duì)于一個(gè)設(shè)計(jì)師來說，一個(gè)不合理的假設(shè)是毀掉一個(gè)網(wǎng)站設(shè)計(jì)的重要因素之一。例如，假設(shè)用戶肯定是通過使用屏幕的全寬和全高瀏覽網(wǎng)站是不正確的。相反，我們需要考慮最壞的情況。
智米么，看明白了嗎?，F(xiàn)實(shí)情況是，并非所有用戶都按照我們所期望一樣使用瀏覽器。 我發(fā)現(xiàn)降低瀏覽器高度時(shí)網(wǎng)站看起來很糟糕。
瀏覽器 DevTools
調(diào)整瀏覽器的大小(垂直方向)并不是改變視口高度的唯一方法。當(dāng)我們打開瀏覽器DevTools，它也會(huì)占用瀏覽器的高度。
上圖中的箭頭區(qū)域代表當(dāng)前視口的高度，對(duì)于較小的筆記本電腦屏幕，我們只會(huì)看到一小部分網(wǎng)頁。
真正的問題是：當(dāng)視口高度較小時(shí)，我們可以增強(qiáng)用戶體驗(yàn)嗎？ 是的，有可能，我們來一起看看。
CSS 中的垂直思考
作為設(shè)計(jì)師和開發(fā)人員，我們中的一些人只關(guān)注設(shè)計(jì)的寬度變化，而忽略了視口高度變化。例如，在開發(fā)中， UI 提供了特定組件在不同視口寬度上的變化。 但是，不同的視口高度又如何呢？
在上圖中，我們有一個(gè)基于視區(qū)高度進(jìn)行調(diào)整的導(dǎo)航菜單。。如果視口大小很小(比如，iPhone 5)，導(dǎo)航項(xiàng)將顯示為一個(gè)兩列網(wǎng)格。這種思維方式通常會(huì)被舍棄，或者直到有人說要做才會(huì)這么去優(yōu)化。
CSS 中可以通過使用兩種不同方式來實(shí)現(xiàn)上面的需求：
Vertical media queries
Viewport units
Vertical Media Queries
智米么肯定知識(shí)在CSS中使用寬度媒體查詢。
@media (min-width: 700px) {
.element {
/* do something.. */
}
}較少使用的是垂直媒體查詢，它檢查視口高度。
@media (min-height: 500px) {
.element {
/* do something.. */
}
}
/* or */
@media (orientation: landscape) {
.element {
/* do something.. */
}
}視口單位
使用視口單位可以幫助為用戶提供更好的體驗(yàn)。 例如，根據(jù)視口高度控制元素之間的垂直間距。
.hero__title {
margin-bottom: calc(10px + 5vh);
}
如上所示，大比較大的屏幕（例如iMac 27英寸），下邊距就會(huì)變的很大。我們有兩種方式來解決邊距過大的問題。
Media queries
CSS comparison 函數(shù)
第一種方式（媒體查詢）受到更多支持。 如果屏幕很大，我們需要為下邊距設(shè)置最大值。
@media (min-width: 2200px) {
.hero__title {
margin-bottom: 40px;
}
}另一種方法是使用CSS clamp()比較函數(shù)，clamp() 函數(shù)的作用是返回一個(gè)區(qū)間范圍的值。
.hero__title {
margin-bottom: clamp(10px, 5vh, 40px);
}用例一：重疊內(nèi)容
在此示例中，有一個(gè)section 區(qū)域，其中有標(biāo)題和插圖的部分, section 高度等于視口高度的100％。
一切看起來都很好，直到視口高度變小。section 的高度將不足以容納插圖和文本內(nèi)容。因此，它將與頁面上的其他部分重疊。
注意插圖與下面的部分如何重疊。 發(fā)生這種情況是因?yàn)橛凶銐虻拇怪笨臻g。 看一下HTML和CSS。
css
.hero {
height: 100vh;
}
.hero__thumb {
flex: 0 0 550px;
width: 550px;
}下面是解決此類問題幾種解決方案：
我們可以將兩者結(jié)合起來，獲得更強(qiáng)大的解決方案。
.hero__thumb {
width: 400px;
height: 300px;
object-fit: contain; /* To avoid compressing the image */
}
@media (min-height: 700px) {
.hero {
height: 100vh;
}好的，現(xiàn)在我們同意使用垂直媒體查詢更好。然而，使用100vh是有風(fēng)險(xiǎn)的，因?yàn)榧词刮覀兿拗屏瞬鍒D的大小，也可能無法對(duì)文本內(nèi)容執(zhí)行相同的操作。如果文本內(nèi)容變長，同樣的問題會(huì)再次發(fā)生，參見下圖：
為了解決這個(gè)問題，我們可以使用min-height而不是height。 這樣，如果內(nèi)容變長，高度將擴(kuò)大并且不會(huì)重疊。
@media (min-height: 700px) {
.hero {
min-height: 100vh;
}
}固定頭部
在滾動(dòng)時(shí)固定標(biāo)題并不是一件壞事，但是，我們要確保只有在垂直空間足夠好的情況下才固定標(biāo)題，這樣體驗(yàn)才會(huì)好。
這是一個(gè)關(guān)于風(fēng)景類的網(wǎng)站，這里我們可以看到，當(dāng)高度過小的時(shí)候，這個(gè)固定高度整體就會(huì)占用很大的空間。這個(gè)對(duì)用戶真的重要嗎?大多數(shù)情況是不重要的，因?yàn)橐话阌脩舨粫?huì)縮小成這樣去看一個(gè)網(wǎng)站。當(dāng)前，如果我們要優(yōu)化也是可以就是，思路就是通過垂直媒體查詢，判斷高度小于某個(gè)高度的時(shí)候就將固定定位改成靜態(tài)定位。
@media (min-height: 700px) {
.site-header {
/* position: fixed or position: sticky */
}
}隱藏不太重要的元素
我在Twitter.com的導(dǎo)航欄上注意到了這個(gè)模式。其思想是將垂直媒體查詢和Priority+模式結(jié)合起來。
調(diào)整視口高度的大小時(shí)，次重要的元素（書簽和列表）將被刪除并附加到“更多”菜單中，這是垂直媒體查詢的一個(gè)很好的用例。
.nav__item--secondary {
display: none;
}
@media (min-height: 700px) {
.nav__item--secondary {
display: block;
}
}減少間距-導(dǎo)航
如果我們網(wǎng)站有側(cè)邊欄或側(cè)邊欄，當(dāng)視口高度很小時(shí)，我們可以減少一些導(dǎo)航項(xiàng)之間的垂直間距，這也會(huì)增強(qiáng)整體設(shè)計(jì)。
.nav__item {
padding-top: 4px;
padding-bottom: 4px;
}
@media (min-height: 700px) {
.nav__item {
padding-top: 10px;
padding-bottom: 10px;
}
}模態(tài)框
我們知道，模態(tài)框至少應(yīng)該水平居中。但是，有時(shí)我們還需要垂直居中，我們一般會(huì)使用下面的方案：
.modal__body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 500px;
}
但是，當(dāng)內(nèi)容變長時(shí)就會(huì)有問題，模態(tài)框會(huì)垂直填滿屏幕，用戶將無法滾動(dòng)它。
引發(fā)這種情況下，有幾點(diǎn)原因：
下面是修復(fù)后的 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是即使內(nèi)容很短也要保持模態(tài)看起來好，max-height是使用特定值限制其高度，而不是添加固定的高度。
以上就是關(guān)于“web前端響應(yīng)式網(wǎng)頁中的高度設(shè)計(jì)實(shí)例分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享題目：web前端響應(yīng)式網(wǎng)頁中的高度設(shè)計(jì)實(shí)例分析
標(biāo)題來源：
http://weahome.cn/article/gigsps.html
重慶分公司
重慶分公司
