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

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

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

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

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

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

网页样式使用方法(移动网页rem与字体大小布局介绍在游览器中运行的效果如图所示)(1)

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

网页样式使用方法(移动网页rem与字体大小布局介绍在游览器中运行的效果如图所示)(2)

实例中定义了全局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:

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

网页样式使用方法(移动网页rem与字体大小布局介绍在游览器中运行的效果如图所示)(3)

,