CSS3移动端vw+rem不依赖JS实现响应式布局的方法

在移动端上实现响应式布局，vw和rem是比较常用的方法。vw是指视口宽度的百分比，而rem是根据根元素的字体大小来进行大小计算的。这两种方法都可以实现响应式布局，但是很多人不知道如何不依赖JavaScript来实现。今天我们就来介绍一下如何不依赖JS使用CSS3实现vw和rem响应式布局。

1、使用vw进行响应式布局

要使用vw进行响应式布局，首先需要设置根元素的字体大小。一般来说我们会将字体大小设置为10px，这样计算就比较方便。具体代码如下：

html {
  font-size: 10vw;
}

这样就将根元素的字体大小设置为了视口宽度的10%。接下来在样式中使用vw就可以直接实现响应式布局了，例如：

.container {
  width: 50vw;
  height: 30vw;
}

这样设置后，容器的宽度为视口宽度的50%，高度为视口宽度的30%。通过这种方式，可以快速实现响应式布局的效果，无需增加JavaScript的编写量。

2、使用rem进行响应式布局

要使用rem进行响应式布局，需要设置根元素的字体大小，并且在样式中使用rem作为单位。同样的，我们也可以将根元素的字体大小设置为10px，这样计算会比较方便。具体代码如下：

html {
  font-size: 10px;
}

接下来，在样式中使用rem就可以实现响应式布局了。例如：

.container {
  width: 50rem;
  height: 30rem;
}

这样设置后，容器的宽度为根元素字体大小的50倍，高度为根元素字体大小的30倍。换句话说，它们是相对于根元素字体大小进行计算的。当浏览器改变视口大小时，根元素字体大小也会改变，从而实现响应式布局的效果。

总结：

使用CSS3的vw和rem单位可以实现响应式布局，并且不需要依赖JavaScript。通过设置根元素的字体大小和使用合适的单位，可以快速实现响应式布局的效果。希望本篇文章对你有所帮助！