CSS是我们编写网页样式的重要语言，而动态计算屏幕尺寸是CSS中非常重要的一部分，本篇文章就来详细讲解一下CSS中动态计算屏幕尺寸的实现方式。

首先我们需要明确一个概念，就是CSS中的Viewport，Viewport指的是浏览器显示当前网页的区域，我们可以通过以下代码获取Viewport的宽度与高度：

const screenWidth = document.documentElement.clientWidth || document.body.clientWidth;
const screenHeight = document.documentElement.clientHeight || document.body.clientHeight;

上述代码是通过JavaScript获取Viewport的宽度与高度并保存到screenWidth与screenHeight变量中的，其中document.documentElement.clientWidth和document.documentElement.clientHeight获取的是网页文档的宽高，而document.body.clientWidth和document.body.clientHeight则是获取网页可见部分的宽高。

我们可以通过上述方法获取屏幕尺寸，但是在CSS中我们更常用的是通过单位vw和vh设置样式，这两者分别代表Viewport的宽度与高度，比如页面中有一段代码：

<div class="full-screen"></div>

我们可以通过以下CSS代码让这个div元素占据整个Viewport的宽度与高度：

.full-screen {
width: 100vw;
height: 100vh;
}

上述代码中的100vw和100vh意思就是元素的宽度和高度都等于Viewport的宽度和高度，如果我们想让元素大小随着Viewport的变化而变化，我们可以使用百分比单位，比如：

.full-screen {
width: 50%;
height: 50%;
}

上述代码中的50%就表示元素的宽度和高度都是Viewport宽度和高度的一半，这样当Viewport的尺寸改变时元素的大小也会跟着改变。

综上所述，CSS中动态计算屏幕尺寸的实现方式是通过Viewport的宽高与单位vw和vh来设置元素的大小，而Viewport的宽高可以通过JavaScript代码获取并保存到变量中，通过百分比单位则可以实现随Viewport尺寸变化而变化的效果。