uni-app的页面样式与布局

       页面样式的编写和布局是开发过程中的基础部分。uni-app页面样式和布局可以使用CSS等前
端基础样式，也可以使用自己的样式规范。

uni-app的尺寸单位
       uni-app支持的通用CSS单位包括px、rpx等。px是屏幕像素，rpx即响应式px—一种根据屏幕宽度自适应的动态单位。以宽为750px的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大，但在App端和H5端，屏幕宽度达到960px时，默认将按照375px的屏幕宽度进行计算。
       Vue页面支持普通HS单位，但以下内容在Nvue里不支持，因为Nvue是基于Weex改进的原生渲染引擎，Weex本身不支持以下内容。
    （1）rem根字体大小可以通过page-meta配置。
    （2）vh viewpoint height，视窗高度，1vh等于视窗高度的1%。

    （3）vw viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

    （4）百分比单位。

       在App端中，pages.json里的titleNView或页面里写的plusapi中涉及的单位只支持px。在Nvue中，uni-app模式可以使用px、rpx为单位，表现与Vue中一致。Weex模式目前使用wx单位，它的单位比较特殊，是与设备屏幕宽度无关的长度单位，类似于px单位。
        设计师在提供设计图时，一般只提供一个分辨率的图。如果严格按设计图标注的px单位进行开发，在不同宽度的手机上界面很容易变形，且主要是横向变形。而纵向因为有滚动条，所以不容易出现问题，由此也导致了开发人员需要动态宽度单位。微信小程序设计了rpx解决这一问题。uni-app在App端、H5端都支持rpx，并且可以配置不同屏幕宽度的计算方式。
        rpx是相对于基准宽度的单位，可以根据屏幕宽度进行自适应。uni-app规定屏幕基准宽度为750rpx。开发者可以通过设计稿基准宽度计算页面元素rpx值，设计稿1px与框架样式1rpx的转换公式为：设计稿1px÷设计稿基准宽度=框架样式1rpx÷750rpx。因此，页面元素宽度在uni-app中的宽度计算公式也就是：页面元素宽度750×元素在设计稿中的宽度+设计稿基准宽度。举例说明如下。
      （1）若设计稿宽度为750px，元素A在设计稿上的宽度为100px，那么元素A在uni-app中的宽度应该设为750×100÷750，结果为100rpx。di
      （2）若设计稿宽度为640px，元素A在设计稿上的宽度为100px，那么元素A在uni-app中的宽度应该设为750×100÷640，结果为117rpx。
      （3）若设计稿宽度为375px，元素B在设计稿上的宽度为200px，那么元素B在uni-app中的宽
度应该设为750×200÷375，结果为400rpx。

（注意：rpx是和宽度相关的单位，屏幕越宽，该值实际像素越大。若不想根据屏幕宽度进行缩放，则应该使用px作为单位。）

        rpx不支持动态横竖屏切换计算，所以使用rpx为单位时建议锁定屏幕方向。通常设计师可以用ihone6的屏幕尺寸作为视觉稿的标准。如果设计稿宽度不是750px，可以使用HBuilderX提供自动换算工具，使用方式详见HBuilderX中自动转换px为upx（相关说明网址见“资源文件\网址索引1.docx”）。
       早期uni-app提供upx单位，目前推荐统一改为rpx单位。

内置CSS变量
       使用内置CSS变量有以下几点需要注意。
     （1）var(--status-bar-height)变量在微信小程序环境中为固定值25px，在App中为手机实际状态
栏高度。
     （2）当设置”navigationStyle”："custom"取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置，此时可以使用一个高度为var(--status-bar-height）的view放在页面顶部，避免页面内容出现在状态栏位置。
    （3）H5端不存在原生导航栏和TabBar，使用前端div模拟导航栏和TabBar。如果设置了一个固定在底部位置的view，其在小程序和App端是在TabBar上方，但在H5端会与TabBar重叠。此时可使用-window-bottom变量，使这个底部view不管在哪个端，都是固定在TabBar上方。
    （4）目前Nvue在App端还不支持--status-bar-height变量，替代方案是在页面onLoad时通过uni.getSystemInfoSyncO.statusBarHeight获取状态栏高度，然后通过style绑定方式给占位view设定高度。