首页常见问题正文

Web前端知识培训：视口是什么意思?

更新时间:2022年07月29日10时58分来源:传智教育浏览次数:

好口碑IT培训

　　手机屏幕多种多样，由于不同手机分辨率、屏幕宽高比都有可能不同，同一张图片在不同手机中显示的位置和大小，在视觉上存在差异，我们需要对不同的手机屏幕进行适配，使相同的程序逻辑在不同的屏幕上显示的视觉效果一致，为此出现了视口的概念。

　　视口(Viewport)是移动前端开发中一个非常重要的概念，最早是苹果公司推出iPhone时发明的，为的是让iPhone的小屏幕尽可能完整显示整个网页。不管网页原始的分辨率尺寸多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果引入视口的概念后，所有的移动开发者也都认同了这个做法。

　　为了方便读者理解视口到底是什么，下面举例进行说明。在网页制作过程中，有时人们会使用百分比来声明宽高，代码如下：

<!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%。

上一篇：网络协议与体系结构：网络层的作用是什么? 下一篇：HTML&JS+前端2022年学习线路图【含资料】