rpx与@import 的用法

• 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方便换算

  注意：

  px 是绝对单位，不管在什么屏幕上，它都是那么大
  rpx 是相对单位，它会根据屏幕大小自适应

• @import 的用法

  紧跟相对路径或绝对路径（以 / 开头），用；号结束

  // test.wxss
  .container{
  	// xxx
  }
  

  // index.wxss
  @import './test.wxss';
  

• 全局样式

  定义在 app.wxss 中，作用于每一个页面

• 局部样式

  在页面的 .wxss 文件中，只作用于当前页面

  当局部样式与全局样式发生冲突时，根据“就近原则”，局部会覆盖全局

  不过只有局部样式 权重大于或等于 全局样式时，才会覆盖