PC端的viewport

時間 2019-11-24

標籤端的 viewport 欄目 HTML5 简体版

原文原文鏈接

##視口html

視口（viewport）的做用是限制<html>元素，<html>元素是全部網頁塊元素中最高一級的元素。web

一個實際的例子。假設在一個流式佈局中，你其中一個邊欄的寬度是10%。如今當你改變瀏覽器寬度時，邊欄會一致的縮放。瀏覽器

那麼問題來了，他到底是如何工做？原理上說，當你給sidebar一個10%的寬度，實際上它得到了父級寬度的10%。ide

讓咱們來考察一下（你並無設定寬度的）body元素。佈局

那麼問題來了，body元素的寬度是多少？ui

一般，全部塊級元素的寬度都會等於父元素（這裏有些特例，但不要在乎細節）。因此<body>元素與其父級<html>元素等寬 element。.net

那麼<html>元素的寬度又如何？爲什麼他與瀏覽器窗口等寬？因爲與瀏覽器窗口等寬，這也就是爲何你設置邊欄寬度爲10%他就佔據了整個瀏覽器寬度的10%htm

。這是一條全部的web開發人員感性上承認並使用的原理。你不知道的只是在理論上，這條原理如何實現。理論上，<html>元素的寬度被視口限制。而<html>元素佔據了100%的視口寬度的。視口寬度又正好等於瀏覽器寬度:就是這麼定義的。視口並不是一個HTML結構，其不受CSS控制。在桌面端，其與瀏覽器窗口長寬一致。但在移動端狀況略微複雜。element

body的寬度=html的寬度=視口寬度=瀏覽器寬度設備的寬度開發

http://www.tuicool.com/articles/ZB32Ivi

http://weizhifeng.net/viewports2.html