- Objective: - Breadcrumb: # 概念阐释 - 浏览器中可以显示主要内容的窗口 - 不包括UI，菜单栏等部分 - 布局视口与视觉视口的区别 ## CSS视口 - 视口不仅指浏览器中显示内容的部分，还包括子视口，例如所有用`<iframe>`嵌入的部分。 - 单位： - 1vw = 1 viewport width = 1% viewport width - 1vh = 1 viewpoet height = 1% viewpoet height 新版本下改动 # 实例 在这个例子中，当父文档（浏览器的视口）宽度为1200px的时候，`iframe`的宽度是多少？当为800px时？ ```css iframe { width: 50vw; } ``` 50vw = 50% viewport width = 1200 x 50% = 600px 800 x 50% = 400px # 相关内容 ## 布局视口与视觉视口 - 视口分为布局视口与视觉视口 - 视觉视口仅指浏览器中可见的部分，并且随着向下浏览，内容会发生变化 - 布局视口是页面的整体布局，比如固定的header和footer # 参考资料