移动网页rem与字体大小布局介绍在游览器中运行的效果如图所示

移动网页布局常见的布局方式有以下3种：

流式布局：通过定义宽度百分比、高度固定的方式实现网页布局

固定布局：通过定义宽度固定、屏幕超出留白的方式实现网页布局

响应式布局：一个网页可以适应多个终端，通过获取设备的屏幕尺寸和分辨率进行判断和布局调整

在rem的简介中我们提到，rem是基于网页根元素字体大小的相对单位，也就是通过html中全局font-size字体大小属性就可以控制rem的大小。在讲解其原理之前，首先通过一个实例来了解一下rem单位与字体大小的关系。

在本地新建wxshop的本地项目，在项目目录下新增css、js和images3个目录存储静态文件，随后新增img.html文件，增加代码如下

在游览器中运行的效果如图所示

实例中定义了全局font-size为20px，所以1rem就等于20px。那么定义的样式为：

1. img{
   

2. display: block;
   

3. margin:2rem auto;
   

4. width:15rem;
   

5. }

而定义img的图片宽度15rem，也就是等于300px。再次修改font-size属性，由20px减半为10px：

• html{
  

• font-size:10px;
  

• }

在游览器中运行的效果如图所示