小程序笔记(2)
-
rpx
(responsive pixel,把屏幕等分为 750 份,即 100vw = 750rpx)尺寸单位 与@import
样式导入 是 wxss 中特有的 -
rem
是网页中独有的,无法在小程序中使用总而言之,css 与 wxss 它们只是有一些公共的特点,它们有自身特别的点
-
有趣的 iPhone6
它的屏幕宽度是 375px,恰好是 750 除以二,所以在这台设备上 1px = 2rpx,还有一些设备大概是这样的:
设备 换算宽度 iPhone5 1px = 2.34rpx iPhone6 1px = 2rpx iPhone6 Plus 1px = 1.81rpx 因为屏幕大就意味着 px 多,所以相应的能换算到 rpx 的就少
官方建议:开发微信小程序时,设计师可以用 iPhone6 作为视觉稿的标准,因为设计师往往给我们的是px的单位,而我们需要换算成rpx的单位,iPhone6方便换算
-
@import 的用法
紧跟相对路径或绝对路径(以 / 开头),用;号结束
// test.wxss .container{ // xxx }
// index.wxss @import './test.wxss';
-
全局样式
定义在 app.wxss 中,作用于每一个页面
-
局部样式
在页面的 .wxss 文件中,只作用于当前页面
当局部样式与全局样式发生冲突时,根据“就近原则”,局部会覆盖全局
不过只有局部样式 权重大于或等于 全局样式时,才会覆盖