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

下面是关于CSS3移动端vw+rem不依赖JS实现响应式布局的完整攻略：

什么是vw和rem？

• “vw”是视口单位，是相对于视口宽度的单位，1vw等于视口宽度的1%
• “rem”是相对单位，相对于根元素（即HTML元素）的字体大小，可根据具体情况自行设定

使用vw+rem实现响应式布局的步骤

1.设置HTML根元素的字体大小

具体字体大小需要根据设计稿来定，通常是16px或10px，假设我们这里取16px为例，在CSS里可以写成：

html {
  font-size: 16px;
}

2.设置设计稿尺寸与vw的换算比例

例如，设计稿宽度为750px，则可以将1vw换算为7.5px：

/* 1vw = 7.5px */
html {
  font-size: 16px;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 6.25vw;
  }
}

3.使用rem单位进行布局

布局的时候，可以使用rem单位，并且根据设计稿中相对应版块的宽度来进行设定。例如：

.container {
  width: 20rem; /* 设计稿里宽度为200px的版块 */
}

在经过上面的设置之后，会发现，当屏幕宽度发生变化的时候，所设置的布局和字体大小也会自动进行调整。

示例说明

下面来看具体两个示例：

示例1：简单布局

看一个简单的页面布局，比如一个标题，一张图片和一段文字，这时候我们可以使用以下的CSS来进行设定：

html {
  font-size: 16px;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 6.25vw;
  }
}

.container {
  width: 20rem; /* 设计稿里宽度为200px的版块 */
  margin: 0 auto;
}

img {
  width: 100%;
  height: auto;
}

.title {
  font-size: 1.5rem; /* 设计稿里19px */
  font-weight: bold;
  margin-bottom: 0.5rem; /* 设计稿里8px */
}

.text {
  font-size: 1.2rem; /* 设计稿里15px */
  line-height: 1.5;
}

在这个示例中，我们根据设计稿来设置了各种元素的宽度和字体大小，然后通过媒体查询来设置vw，以保证响应式布局。如果屏幕宽度小于750px，则重新设置html的字体大小为6.25vw。

示例2：使用flex进行布局

flex是CSS3提供的一种强大的布局方式，适用于复杂的页面布局。下面是一个使用flex的布局示例：

html {
  font-size: 16px;
}

@media screen and (max-width: 750px) {
  html {
    font-size: 6.25vw;
  }
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 48rem; /* 设计稿里480px */
  margin: 0 auto;
}

.logo {
  width: 15rem; /* 设计稿里宽度为150px */
}

.nav {
  flex: 1;
  padding-left: 2rem; /* 设计稿里20px */
}

.nav li {
  display: inline-block;
  margin-right: 1.5rem; /* 设计稿里15px */
}

.cta {
  font-size: 1.2rem; /* 设计稿里15px */
  padding: 0.5rem 1rem;
  border: 1px solid #fff;
  border-radius: 2rem;
}

在这个示例中，我们使用了CSS3的flex布局来设置导航栏和LOGO的布局，使得它们在屏幕宽度发生变化的时候，会自动进行调整。此外，我们也使用了vw和rem单位来设置各种元素的宽度和字体大小，在保证响应式布局的同时，也使得布局更具灵活性，更加适应不同大小的屏幕。

总体来说，使用vw+rem实现CSS3移动端的响应式布局，能够使得页面布局和字体大小在不同设备上自适应，并且不依赖于JS的帮助。以实现更好的用户体验和更高的设备兼容性。