CSS之viewports剖析
生活随笔
收集整理的這篇文章主要介紹了
CSS之viewports剖析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.設備的pixels和CSS的pixels
首先你應當理解CSS的pixels，以及它和設備的pixels的區別
我們姑且認定設備的pixels為標準的pixels寬度。這些pixels決定了你工作所用的那些設備上正式的分辨率。在大多數情況下，能夠從screen.width/height上取出具體值
如果用戶縮放（zoom）了瀏覽器，當然必須改變計算方式。例如用戶縮放了200%，上訴顯示器只能橫排容納4個上訴元素了
現代瀏覽器上的縮放的結果是，html元素上的寬度并沒有因為縮放200%而由128pix變成256px，而是真實的pixels的被計算成了雙倍。html元素在形式上依然是128CSS的pixels，即便它占用了256設備的pixels
換言之，縮放200%將一個單位的CSS的pixels變成了4倍的設備的pixels那么大，即寬度 * 2、高度 * 2，面積擴大了2 * 2
下列圖片將清楚的解釋這個概念。如圖1-1.有4個1像素，縮放為100%的html元素，CSS的pixels完整的和設備的pixels重疊
當我們縮小瀏覽器時，CSS的pixels開始收縮，導致1單位的設備的pixels上容納了多個CSS的pixels
同理，放大瀏覽器時，相反的事情發生了，CSS的pixels開始擴大，導致1單位的CSS的pixels上容納了多個設備的pixels
總體而言，你只需要關注CSS的pixels，這些pixels指定你的樣式被如何渲染
2.100% 縮放
在縮放級別為100%時，1單位的CSS的pixel是嚴格相等于1單位的設備pixel
在桌面系統上，你通常會在100%縮放級別下測試你的網站，但即便用戶縮放，CSS的pixels的魔法依然能保證你網站外觀保存相同的比例
3.屏幕尺寸 Screen size
screen.width/height：用戶的屏幕的完整大小
我們先了解一些特殊的尺寸：screen.width 和 screen.height。這兩個屬性包含了用戶屏幕的完整寬度高度。這些尺寸使用設備的pixels來定義，他們的值不會因為縮放而改變：他們是顯示器的特征，而不是瀏覽器
4.瀏覽器尺寸 Window size
window.innerWidth/Height：包含滾動條尺寸的瀏覽器完整尺寸
你想要知道的瀏覽器的內部尺寸。它定義了當前用戶有多大區域，可供你的CSS布局占用。你可以通過window.innerWidth 和 window.innerHeight來獲取
5.滾動移位 Scrolling offset
window.pageX/YOffset：頁面的移位
window.pageXOffset 和 window.pageYOffset，定義了頁面(document)的相對于窗口原點的水平、垂直位移。因此你能夠定位用戶滾動了多少的滾動條距離
原理上來說，在用戶放大瀏覽器時，向上滾動了頁面，window.pageX/YOffset會改變。但當用戶放大頁面時，瀏覽器會嘗試著保存用戶當前可見的頁面的元素依然在可見位置。雖然該特性表現得不如預期，但它意味著：在理論上 該情況下 window.pageX/YOffset并沒有改變，被用戶滾出屏幕的CSS的pixels幾乎保存不變
6.視窗 viewport
viewport的功能在于控制你網站的最高塊狀（block）容器：<html>元素
聽起來有點玄乎，舉個例子~假設你定義了一個可變尺寸的布局（liquid layout），且你定義一個側邊欄的寬度為width: 10%。當你改變瀏覽器窗口大小時，該側邊欄會自動擴張和收縮。這是什么原理呢？
那么異常情況就是父元素的寬度究竟是多少？通常，一個塊級元素占有起父元素的100%的寬度（這里如果有異常情況，暫時忽略）。所以的寬度就是其父元素<html>的寬度
那么<html>元素到底有多寬？因為它的寬度恰好為瀏覽器的寬度。所以你的側邊欄寬度width: 10%會占用10%的瀏覽器寬度。所以的web開發人員都直觀的知道和使用該特性了。 但是你也許不知道原理。在原理上，<html>的寬度受viewport所限制，<html>元素為viewport寬度的100%
反過來，viewport是嚴格的等于瀏覽器的窗口：定義就是如此。viewport不是一個HTML的概念，所以你不能通過CSS修改它。它就是為瀏覽器窗口的寬度高度 – 在桌面瀏覽器上如此，移動設備瀏覽器上有點復雜
總結
以上是生活随笔為你收集整理的CSS之viewports剖析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 4个优化MongoDB的技巧
- 下一篇： Git本地版本管理