教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

Web前端知識培訓：視口是什么意思?

更新時間:2022年07月29日10時58分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓

　　手機屏幕多種多樣，由于不同手機分辨率、屏幕寬高比都有可能不同，同一張圖片在不同手機中顯示的位置和大小，在視覺上存在差異，我們需要對不同的手機屏幕進行適配，使相同的程序邏輯在不同的屏幕上顯示的視覺效果一致，為此出現(xiàn)了視口的概念。

　　視口(Viewport)是移動前端開發(fā)中一個非常重要的概念，最早是蘋果公司推出iPhone時發(fā)明的，為的是讓iPhone的小屏幕盡可能完整顯示整個網頁。不管網頁原始的分辨率尺寸多大，都能將其縮小顯示在手機瀏覽器上，這樣保證網頁在手機上看起來更像在桌面瀏覽器中的樣子。在蘋果引入視口的概念后，所有的移動開發(fā)者也都認同了這個做法。

　　為了方便讀者理解視口到底是什么，下面舉例進行說明。在網頁制作過程中，有時人們會使用百分比來聲明寬高，代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
<div style="width: 50%"></div>
</body>
</html>

　　在上述代碼中，div是body的子元素，設置style="width:50%"就表示該div占body寬度的50%，而body沒有顯示聲明寬度，因此body占用了父包含塊(視口)html元素寬度的100%。同樣，html也沒顯示聲明寬度，因此html元素也占父包含塊的100%。

0 分享到：
和我們在線交談！