视口与响应式设计-CSDN博客

本文深入解析了视口概念，包括布局视口、视觉视口及理想视口，并介绍了如何通过设置视口元标签和调整根html元素的字体大小实现响应式网页设计，以适应不同设备。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视口（viewport）的理解

layout viewport（布局视口）
Layout viewportd 宽度大于浏览器的可视区域，就好比你的电脑屏幕宽度是1024，但是你网页的宽度是1400.那么1400就是layout viewport的宽度。
Visual viewport（视觉视口）
Visual Viewport 的宽度就相当于你客户端的屏幕大小。
宽度获取可以通过 window.innerWidth获取。
.Ideal viewport（理想视口）
移动设备的理想viewport

设置视口

 <meta name="viewport" content="width=device-width, initial-scale=1.0" />

设置根html元素

一般我们将其设备的宽度分为30分，这里以iphonex为例，iphonex的设备宽度为375px，分成30份，定义 1rem = 375px / 30 = 12.5px;

为了动态适配所有设备，通过动态根据设备宽度进度进行设置根html的fontSize值，代码如下：

/*pxRem 为获取1rem的像素数值*/
let pxRem = window.screen.width / 30;
/*pxRem + ‘px’ 设置1rem的值*/
document.getElementsByTagName("html")[0].style.fontSize = pxRem + "px";