纯css3使用vw和vh实现自适应的方法

CSS3里的单位vw和vh分别表示视口宽度和高度的百分比，用它们来实现自适应布局可以让页面元素随着视口大小的变化而自动调整。以下是纯CSS3使用vw和vh实现自适应的方法：

1. 设计视口尺寸的基准值，按照需求设置宽高值，比如1000px宽度的设计图，则基准值为1000。

2. 将设备视口宽度或高度（其中较小值）除以基准值，得到一个百分比值。

3. 对于元素宽度，设定vw为这个百分比值，高度同理用vh。

举个例子，假设我们要实现一个宽高比为2:1的自适应div块。

1. 设定基准值，在设计图中为1000px * 500px，所以基准值设置为1000。

2. 假设设备视口宽度为1200px，高度为800px，则设备视口较小值为800px。

3. 计算宽度和高度的百分比值，宽度的vw为800/1000 * 100% = 80%，高度的vh为1200/1000 * 50% = 60%。

4. 设置CSS样式： .box{width: 80vw; height: 60vh; }

这样就实现了宽高比为2:1的自适应div块。利用vw和vh实现自适应的优点在于无论用户使用哪种设备，页面元素都可以根据设备视口大小自动适应。而且此方法不需要计算百分比数值，只需要代码实现即可。

相关问题

css背景图片全屏铺满自适应

可以通过CSS的background-size属性来实现背景图片全屏铺满自适应。

具体的实现步骤如下：

1. 将背景图片设置为元素的背景：background-image: url('your-image-url');

2. 将背景图片的尺寸设置为cover，以保证图片能够完全覆盖元素：background-size: cover;

3. 将背景图片的位置设置为中心，以保证图片在元素中心位置显示：background-position: center;

4. 将元素的高度设置为100vh，以保证元素占据整个视口高度：height: 100vh;

5. 可以将元素的宽度设置为100vw，以保证元素占据整个视口宽度：width: 100vw;

最终的CSS样式代码如下：

body {
  background-image: url('your-image-url');
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
}

这样就可以实现背景图片全屏铺满自适应了。

css字体大小自适应

可以使用CSS3的`vw`或`vh`单位，它们分别表示视口的宽度和高度的百分比。这样可以根据屏幕尺寸自动调整字体大小。

例如，将字体大小设置为视口宽度的5%：

font-size: 5vw;

如果你想要更精细的控制，可以使用媒体查询来设置不同屏幕尺寸下的字体大小：

/* 在视口宽度小于600px时，将字体大小设置为12px */
@media screen and (max-width: 600px) {
  font-size: 12px;
}

/* 在视口宽度大于600px时，将字体大小设置为5vw */
@media screen and (min-width: 600px) {
  font-size: 5vw;
}

这样可以根据不同设备的屏幕尺寸自动调整字体大小，提高用户体验。