CSS3的屏幕高度属性（vh）是一种相对长度单位，用于定义元素的高度。是相对于视口的高度来计算的，不是相对于父元素或包含块的高度。
CSS3的屏幕高度单位为vh，其中1vh等于视口高度的1%。视口是指浏览器窗口的可见部分，不包括滚动条和其他浏览器组件。
使用CSS3的屏幕高度属性可以实现一些有趣的效果和布局。下面是一些常见的用法和示例：
1. 设置全屏背景图像：通过将元素的高度设置为100vh，可以实现一张背景图像占满整个视口的效果。可以通过以下代码将body元素的背景图像设置为全屏：
```css
body {
height: 100vh;
background-image: url(background.jpg);
background-size: cover;
background-repeat: no-repeat;
}
```
2. 创建全屏滚动页面：通过将每个页面部分的高度设置为100vh，可以创建一个占满整个视口的滚动页面。可以使用以下代码创建一个拥有两个全屏页面的滚动页面：
```html
第一页
第二页
```
```css
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
```
3. 响应式布局：CSS3的屏幕高度属性可以用于创建响应式布局，根据视口大小自适应调整元素的高度。可以使用以下代码创建一个自适应高度的容器：
```html
自适应容器
```
```css
.container {
height: 50vh;
width: 50%;
background-color: gray;
display: flex;
justify-content: center;
align-items: center;
}
```
在这个示例中，容器的高度将始终是视口高度的50%。当视口缩小或放大时容器的高度也会相应地调整。
css3如何实现屏幕自适应
CSS是层叠样式表的缩写是一种用来描述网页样式的语言。CSS3是CSS的升级版，引入了许多新的特性和功能，其中包括了屏幕自适应的能力。屏幕自适应是指网页能够根据不同设备的屏幕尺寸和分辨率自动调整布局和样式，以更好地适应不同设备上的显示效果。
在CSS3中，有几个重要的特性可以实现屏幕自适应。
1. 媒体查询（Media Queries）：媒体查询是CSS3提供的一种机制，可以根据设备的特性来应用不同的样式。我们可以使用媒体查询来判断设备的屏幕大小和分辨率并根据这些条件应用不同的样式。可以设置当屏幕宽度小于某个阈值时将元素的宽度设置为100%。
2. 弹性盒子（Flexbox）：弹性盒子是CSS3中一种新的布局模型，可以根据容器的尺寸和子元素的布局方式自动调整布局。通过使用弹性盒子，我们可以很方便地实现自适应布局。可以使用弹性盒子来水平居中元素，或者根据容器的宽度自动调整子元素的排列。
3. 响应式图片（Responsive Images）：在不同设备上显示图片时我们通常希望能够根据设备的屏幕分辨率来加载适合的图片。CSS3提供了一种新的属性，可以让浏览器根据设备的屏幕分辨率选择合适的图片进行显示。可以使用"srcset"属性来指定不同分辨率的图片地址并使用"sizes"属性来指定图片在不同屏幕宽度下的显示大小。
除了上述的几个重要特性，CSS3还提供了其他许多能够帮助实现屏幕自适应的功能，例如弹性图像、自适应字体、媒体元素等。通过这些功能，我们可以更加灵活地控制网页的布局和样式，让网页在不同设备上都能够显示出最佳的效果。
css3获取屏幕高度
CSS3获取屏幕高度可以通过使用 `vh` 单位来实现。`vh` 表示视口高度的百分比是相对于视口的高度的百分比值。视口是指浏览器可视区域的大小，也就是浏览器窗口的高度。
在使用 `vh` 单位时可以通过设置元素的高度属性为 `100vh` 来实现元素的高度等于视口的高度。例如：
```css
.element {
height: 100vh;
}
```
上述代码将使 `.element` 元素的高度等于视口的高度，无论视口大小如何变化。
使用 `vh` 单位可以很好地适应不同大小的屏幕，无论是桌面设备还是移动设备。当用户调整浏览器窗口的大小时元素的高度也会相应地调整。
除了使用 `vh` 单位，也能使用 JavaScript 来获取屏幕的高度并动态地设置元素的高度。通过 `window.innerHeight` 属性可以获取浏览器窗口的高度。例如：
```javascript
var screenHeight = window.innerHeight;
document.getElementById("element").style.height = screenHeight + "px";
```
上述代码将通过 JavaScript 获取浏览器窗口的高度并将其赋值给 `#element` 元素的高度属性。`screenHeight + "px"` 的形式将高度值转换为像素单位。
使用 JavaScript 动态设置元素的高度可以提供更大的灵活性，可以根据实际需求来调整元素的高度。