uni-app 通用尺寸单位rpx及样式

官方文档：

rpx 即响应式px，是一种根据屏幕宽度自适应的动态单位。uni-app规定屏幕的基准宽度为750rpx。

关于rpx说明

设计师在提供设计图时，一般只提供一个分辨率的图，作为开发者如果严格按照设计图标注的px做开发，在适配不同宽度的时候很容易变形，而且是宽度变形，因为有滚动条，高度不会出问题。

微信小程序设计了rpx解决了此问题，而uni-app在App端、H5端也都实现了对 rpx 的支持。

开发者可以根据设计稿的基准宽度来计算页面元素的rpx值，设计稿的1px 与 框架样式 1rpx 转换公式如下：

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

所以，在实际开发中，1 rpx = 750 * （ 设计稿宽度 / 设计稿基准宽度 ）

很好理解，比如：

1、设计稿的基准宽度为 750px, 有一个红色方块宽度为100px，换算成rpx 结果为：100rpx ，也就是说 1rpx = 1px

750 * 100 / 750

2、设计稿为640px，红色方框宽度为100px，换算成rpx结果为：117rpx

750 * 100 / 640 

注意：

（1）rpx是宽度相关的单位，屏幕越宽，元素会 越大，如果不想随着屏幕 宽度缩放， 请使用px 。

（2）字体 或者 高度使用了rpx ， 那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。

（3）rpx不支持横屏切换，如果使用rpx 建议锁定屏幕方向。

（4）早期uni-app推荐使用upx，目前官方 已经推荐统一改为rpx了 。查看详情——公告网址： https://ask.dcloud.net.cn/article/36130

 

样式导入

关于导入外联样式， 需要使用  @import  ，最后以分号结束 

@import "../../common/uni.css";

注意：

（1）在uni-app中不能使用通配符选择器 * 

（2）page 相当于body 节点

/*设置页面背景颜色*/
page {
    background-color: #666
}

 

 全局样式与局部样式

全局样式：

定义在App.vue中的样式为全局样式，可以作用于每个页面。

局部样式：

定义在pages目录下的 .vue文件中的样式为局部样式，局部样式只会作用于当前页面，如果全局样式与局部样式类名重复，局部样式会覆盖全局样式。

 

 css变量

1、--status-bar-height

/* --status-bar-height 系统状态栏高度,在小程序中固定位为25px，在5+App为手机实际状态高度 */
.view{
    hegiht: var(--status-bar-height)
}

2、--window-top  内容区域距离顶部的距离。

3、--window-bottom 内容区域距离底部的距离。

小技巧：

快速书写css变量的方法：在css中敲 hei