课件及源码地址

精选留言(3)

• 
  sljoai

  2018-04-03

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

  作者回复: 一般就是内容做宽度适配，如果高度适配的话，也可以用rpx，这里我只是简单的举个例子。表示px和rpx都是支持的哈

  

   2
• 
  超

  2019-07-09

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

  展开

  

   1
• 
  红军大叔

  2018-10-10

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

  作者回复: 一般我们指宽度自适应，所以会用750rpx来表示屏幕整屏宽度

  

   1