亚洲中文无码亚洲人网站试看
400-800-9385
網站建設資訊詳細

rem單位在移動端網站開發上的使用技巧

發表日期:2022-10-21 09:33:14   作者來源:王小華   瀏覽:100   標簽:移動網站開發    
視窗單位一直都存在爭議,部分原因是因為移動端瀏覽器對如何實現視窗單位有著自己的看法,這樣就讓本來簡單的事情變得更加復雜化。
 
一個典型的示例是:
 
vw的計算是否要包含瀏覽器的滾動條?
那么網站的導航或頁面控件呢?
這些應該算在計算中嗎?
還有一些設備本身的物理屬性(比如iPhone X的劉海)是不容忽視的。
 
 
 
首先,了解一下背景
 
有關于如何計算視窗單位的規范描述的相當模糊。對于移動設備,我們通常關心的是高度,所以讓我們具體來看一下視窗單位中的vh:
 
vh unit:Equal to 1% of the height of the initial containing block.
 
直譯過來,大致的意思是“vh等于初始包含塊高度的1%”。
 
所以,在處是設備和特定的瀏覽器的區別方面,沒有明確的指導。
 
vh最初是由瀏覽器的當前視窗計算的。如果你打開瀏覽器開始加載一個網站,1vh等于你屏幕高度的1%(減去瀏覽器界面)。
 
1vh = window.innerHeight。
 
但是!如果你開始滾動,那就另當別論了。一旦你通過了一個瀏覽器界面,比如地址欄,vh值就會更新,結果就是內容的跳躍。
 
iOS的Safari瀏覽器是最早更新其實現的移動端瀏覽器之一,它選擇根據屏幕的最大高度為vh的計算值(為vh定義一個固定值)。這樣,一旦地址欄離開視窗,用戶在頁面上也不會看到內容的閃跳。
 
 
雖然使用固定值很好,但這也意味著如果地址欄在視窗中,就不能有一個全屏高度的元素。元素的底部將被裁剪。
 

網站建設

 
正如上圖所示,當地址欄在視窗中時(左圖),元素的底部被裁剪,但我們想要的是元素底部不被裁剪(右圖)。
 
 
 
CSS自定義屬性:調整大小的技巧
 
我突然想到,CSS自定義屬性和幾行JavaScript代碼可能是獲得所需的一致和正確大小的完美解決方案。
 
在JavaScript中,你始終可以使用全局變量window.innerHeight獲得當前視窗的值。這個值考慮了瀏覽器的界面,并在其可見性(visibility)發生變化時進行了更新。訣竅就是將視窗(viewport)值存儲在CSS自定義屬性(CSS變量)中,并將其應用于元素,而不是vh單位。
 
假設我們在例子中設置一個CSS自定義屬性:--vh。這意味著我們將在CSS像下面這樣使用這個自定義屬性:
 
.my-element {
    height: 100vh; /* 為不支持自定義屬性的瀏覽器做降級處理 */
    height: calc(var(--vh, 1vh) * 100);
}
好了,這就搞定了,就是這么的簡單?,F在讓我們使用JavaScript來獲得視窗的內部高度(window.innerHeight):
 
// 首先獲取視窗高度,再乘以1%得到vh單位的值
let vh = window.innerHeight * 0.01;
 
// 把--vh的值設置到文檔的根元素中
document.documentElement.style.setProperty('--vh', `${vh}px`);
因此,我們告訴JavaScript獲取視窗的高度,然后占這個值的1%,所以我們就可以將值指定為視窗高度單位值。然后使用JavaScript在:root中創建CSS自定義屬性--vh。
 
因此,我們現在就可以像使用其他單位一樣使用--vh作為高度值,然后乘以100就能得到我們想要的高度值。

親自體驗一下,調整視窗的高度,在根元素html中可以看到--vh值是動態變化的:
 

手機端開發



 
還有一個小細節
雖然我們的工作看上去已經完成了,但是對于追求細節的同學而言,可能已經發現了,當視窗的高度改變時,不會自動更新元素的大小。那么我們接著在上面的示例上進行調整。
 
我們可以監聽window的resize事件來更新--vh的值。如果用戶旋轉設備屏幕,比如從橫向到縱向,或者導航移動到滾動視窗之外,這樣就非常方便。
 
// 監聽resize事件
window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});
更新--vh的值將會觸發頁面重繪,用戶可能會感覺頁面在跳動。因此,我并不是說這個技巧應該用于每個項目,或者替換vh單位的所有用法,但是只有當你需要你的用戶擁有一個確切的視窗單位值時才使用。
 
此外,你可能希望resize事件實現debounce方法,以避免在用戶調整瀏覽器窗口大小時觸發許多事件。
如沒特殊注明,文章均為方維網絡原創,轉載請注明來自http://www.98aitao.com/news/6561.html
亚洲中文无码亚洲人网站试看,亚洲日本AⅤ精品一区二区,亚洲综合精品无码中文字幕_午夜