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

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

Web前端知識培訓(xùn)：視口是什么意思?

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

好口碑IT培訓(xùn)

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

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

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

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

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

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