如何在渲染页面和每次调整窗口大小时调用函数？

在渲染页面和每次调整窗口大小时调用函数，可以通过以下几种方式实现：

1. 使用JavaScript的事件监听器：可以使用window对象的resize事件监听器来捕捉窗口大小调整的事件，并在事件触发时调用相应的函数。同时，可以使用DOMContentLoaded事件监听器来捕捉页面渲染完成的事件，并在事件触发时调用相应的函数。

示例代码：

window.addEventListener('resize', function() {
  // 窗口大小调整时执行的代码
});

document.addEventListener('DOMContentLoaded', function() {
  // 页面渲染完成时执行的代码
});

1. 使用CSS的媒体查询：可以在CSS样式表中使用媒体查询来检测窗口大小的变化，并通过设置相应的样式来触发函数的执行。可以利用@media规则来定义不同窗口大小下的样式，并在样式中使用伪类选择器来执行函数。

示例代码：

@media screen and (max-width: 768px) {
  /* 窗口宽度小于等于768px时执行的样式 */
  .element::after {
    content: '';
    /* 执行函数的代码 */
  }
}

1. 使用前端框架的生命周期钩子函数：如果使用了像React、Vue等前端框架，可以利用它们提供的生命周期钩子函数来在页面渲染和窗口大小调整时执行相应的函数。具体的实现方式会根据所使用的框架而有所不同，可以查阅相应框架的文档来了解具体的使用方法。

总结起来，以上是几种常见的方法来在渲染页面和每次调整窗口大小时调用函数的方式。具体选择哪种方式取决于项目的需求和所使用的技术栈。