使用CSS3的rem属性制作响应式页面布局的要点解析

下面就是使用CSS3的rem属性制作响应式页面布局的要点解析攻略：

1. 什么是rem属性

rem是CSS3新增的一个相对单位，其值相对于根元素（html）的字体大小而定。通俗来说，1rem等于根元素（html）的字体大小。比如，如果当前页面的根元素（html）的字体大小为16px，则1rem等于16px。

2. 使用rem属性制作响应式页面布局的要点

2.1 将页面根元素字体大小设置为百分比或者rem

由于rem属性的值相对于根元素（html）的字体大小而定，因此将根元素的字体大小设置为rem或者百分比是制作响应式页面布局的重要前提。

示例代码：

html {
  font-size: 62.5%; /* 将根元素字体大小设置为10px */
  /* 或者使用rem */
  /* font-size: 1rem; */
}

2.2 页面布局的尺寸、间距、边框等元素使用rem属性进行设置

布局的尺寸、间距、边框等元素的设置可以使用rem属性，这样使得页面元素随着根元素（html）字体大小的改变而自适应。

示例代码：

.container {
  width: 60rem;
  height: 30rem;
  margin: 5rem auto;
  border: 0.5rem solid #ccc;
}

2.3 使用媒体查询针对不同屏幕尺寸设置根元素字体大小

在rem布局中，根元素（html）的字体大小决定了页面布局中所有元素的尺寸，而媒体查询可以根据不同的屏幕尺寸设置根元素的字体大小，从而让页面在不同的设备上呈现出最佳的显示效果。

示例代码：

/* 在屏幕宽度小于768px时以20px为根元素字体大小 */
@media screen and (max-width: 767px) {
  html {
    font-size: 20px;
  }
}

/* 在屏幕宽度大于768px并且小于1200px时以40px为根元素字体大小 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  html {
    font-size: 40px;
  }
}

/* 在屏幕宽度大于1200px时以60px为根元素字体大小 */
@media screen and (min-width: 1200px) {
  html {
    font-size: 60px;
  }
}

3. 使用CSS3的rem属性制作响应式页面布局的两条示例说明

3.1 示例一：使用rem和媒体查询制作响应式网页

在下面的示例中，我们使用rem属性和媒体查询制作一个响应式的网页。该网页在屏幕宽度不同的设备上展示的效果不同，适应不同的屏幕尺寸。

示例代码：

/* 将根元素字体设置为10px */
html {
  font-size: 62.5%;
  /* 或者使用rem */
  /* font-size: 1rem; */
}

/* 在屏幕宽度小于768px时以14px为根元素字体大小 */
@media screen and (max-width: 767px) {
  html {
    font-size: 14px;
  }
}

/* 在屏幕宽度大于768px并且小于1200px时以20px为根元素字体大小 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  html {
    font-size: 20px;
  }
}

/* 在屏幕宽度大于1200px时以30px为根元素字体大小 */
@media screen and (min-width: 1200px) {
  html {
    font-size: 30px;
  }
}

/* 页面布局使用rem进行设置 */
.container {
  width: 50rem;
  height: 30rem;
  margin: 5rem auto;
  border: 0.5rem solid #ccc;
  font-size: 2.4rem;
}

该示例中的页面布局使用rem属性进行设置，适应不同的屏幕尺寸。

3.2 示例二：使用rem和媒体查询制作响应式移动端页面

在下面的示例中，我们使用rem属性和媒体查询制作一个响应式的移动端页面。该页面在移动设备上展示的效果不同，适应不同的屏幕尺寸。

示例代码：

/* 将根元素字体设置为10px */
html {
  font-size: 62.5%;
  /* 或者使用rem */
  /* font-size: 1rem; */
}

/* 在屏幕宽度小于768px时以14px为根元素字体大小 */
@media screen and (max-width: 767px) {
  html {
    font-size: 14px;
  }
}

/* 移动端在屏幕宽度小于375px时以12px为根元素字体大小 */
@media screen and (max-width: 374px) {
  html {
    font-size: 12px;
  }
}

/* 移动端在屏幕宽度大于375px并且小于750px时以24px为根元素字体大小 */
@media screen and (min-width: 375px) and (max-width: 749px) {
  html {
    font-size: 24px;
  }
}

/* 页面布局使用rem进行设置 */
.container {
  width: 80%;
  height: 30rem;
  margin: 5rem auto;
  border: 1px solid #ccc;
  font-size: 1.6rem;
}

该示例中的页面布局也使用rem属性进行设置，适应不同的移动设备屏幕大小。在屏幕小于375px时，根元素字体大小为12px，使用rem属性进行布局；在屏幕大于375px并且小于750px时，根元素字体大小为24px，使用rem属性进行布局。