课件及源码地址

为啥width的像素单位为rpx，height的像素单位为px？老师能否解释一下。

屏幕宽度是750rpx， 那么高度是多少rpx呢？

rpx （首字母 r : relative，同样的rem），是相对单位。相对单位的作用主要就是用于等比列缩放 等比列缩放的意思：页面布局不变，屏幕越大，页面中的所有元素（包括字体大小、图片尺寸、容器大小、容器间的间距）等比例的放大，屏幕越小，对应的等比例缩小 一般做适配，说的都是宽度自适应，高度方面可能出现滚动条（等比例缩放，自适应的一种方式），或者纵向内容较少的时候，可以通过flex布局塞入几个自适应的空容器(div)，使得页面布局刚好为一屏（flex弹性布局，自适应的另一种方式）。 有人好奇，为啥宽度自适应，高度不能自适应呢？ 其实宽高度都有自适应的单位，css3 中的 vw vh，是另外一种形式的相对单位，分别相对的是可视窗口宽度、可视窗口高度。 为啥一般等比例缩放，适配的是宽度而不是高度呢？ 首先，不应该同时适配宽度跟高度，因为各型号手机屏幕宽高比例不是固定的，假如有一款手机的宽高比为1：1，为正方形。设计稿的内容是页面要高一些，像 163 首页那种页面高度比宽度长。宽、高度都适应的后果，就是页面里的字就要变形，不再是方块字，而都变成像“-”这种外形的了（宽一些，矮一些），比例失调。即使页面融合在了一屏，里边的字体外形要么偏向“-”，要么偏向“|” 都不利于人们观看。 上边说的变形的问题，再下来就是滚动条的问题，假如不做自适应，可能同时出现横向、纵向滚动条。就像高德地图那样，可以任何方向的滑动屏幕，当然屏幕也会跟着你的手势移动。要想让页面比例不变形，要么出现横向滚动条，要么纵向。相对布局主要的使用场景是在触屏设备（手机），人们的使用习惯是上下滑动屏幕，所以需要宽度自适应（撑满整个屏幕），高度出现滚动条。

可以在这边讲讲弹性布局