当前播放: 18 | WXSS特性之样式
00:00 / 00:00
高清
  • 高清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看
课程目录
18 | WXSS特性之样式

18 | WXSS特性之样式

高磊
腾讯NOW直播前端工程师,IVWEB团队成员
全集13782
已下架
10
本节摘要
登录 后留言

精选留言(4)

  • sljoai
    为啥width的像素单位为rpx,height的像素单位为px?老师能否解释一下。

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

    2018-04-03
    2
  • rpx (首字母 r : relative,同样的rem),是相对单位。相对单位的作用主要就是用于等比列缩放

    等比列缩放的意思:页面布局不变,屏幕越大,页面中的所有元素(包括字体大小、图片尺寸、容器大小、容器间的间距)等比例的放大,屏幕越小,对应的等比例缩小

    一般做适配,说的都是宽度自适应,高度方面可能出现滚动条(等比例缩放,自适应的一种方式),或者纵向内容较少的时候,可以通过flex布局塞入几个自适应的空容器(div),使得页面布局刚好为一屏(flex弹性布局,自适应的另一种方式)。

    有人好奇,为啥宽度自适应,高度不能自适应呢?
          其实宽高度都有自适应的单位,css3 中的 vw vh,是另外一种形式的相对单位,分别相对的是可视窗口宽度、可视窗口高度。

    为啥一般等比例缩放,适配的是宽度而不是高度呢?
          首先,不应该同时适配宽度跟高度,因为各型号手机屏幕宽高比例不是固定的,假如有一款手机的宽高比为1:1,为正方形。设计稿的内容是页面要高一些,像 163 首页那种页面高度比宽度长。宽、高度都适应的后果,就是页面里的字就要变形,不再是方块字,而都变成像“-”这种外形的了(宽一些,矮一些),比例失调。即使页面融合在了一屏,里边的字体外形要么偏向“-”,要么偏向“|” 都不利于人们观看。
          上边说的变形的问题,再下来就是滚动条的问题,假如不做自适应,可能同时出现横向、纵向滚动条。就像高德地图那样,可以任何方向的滑动屏幕,当然屏幕也会跟着你的手势移动。要想让页面比例不变形,要么出现横向滚动条,要么纵向。相对布局主要的使用场景是在触屏设备(手机),人们的使用习惯是上下滑动屏幕,所以需要宽度自适应(撑满整个屏幕),高度出现滚动条。
          
    2019-07-09
    1
  • 红军大叔
    屏幕宽度是750rpx, 那么高度是多少rpx呢?

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

    2018-10-10
    1
  • 沧海一声笑哈哈
    可以在这边讲讲弹性布局
    2020-03-22
收起评论
看过的人还看
左耳听风

陈皓  网名“左耳朵耗子”,资深技术专家,骨灰级程序员

109讲 | 45759 人已学习

新人首单 ¥69.9 原价 ¥299
玩转Git三剑客

苏玲  携程代码平台负责人

62讲 | 17880 人已学习

新人首单 ¥9.9 原价 ¥68
Vue开发实战

唐金州  一点资讯前端技术专家,Ant Design Vue 作者

53讲 | 14179 人已学习

新人首单 ¥29.9 原价 ¥129
深入浅出区块链

陈浩  元界CTO

40讲 | 17800 人已学习

新人首单 ¥9.9 原价 ¥68