image.png

尺寸单位

  • px
  • rpx: 可以根据屏幕的宽度
    • 设计稿 1px/设计稿基准宽度=框架样式 1rpx/750rpx
    • 在uni-app中：750*元素在设计稿中的宽度/设计稿基准宽度

设计稿 750px 100px
750100/750=100rpx

设计稿 640px 100px
750100/640=117rpx
每次设计都需要计算，很麻烦，HBuilder提供了工具：
image.png
image.png

使用rpx需要注意：

rpx只针对宽度，如果手机由竖屏切换到横屏，就会导致布局错乱

样式导入

  • @import ‘外部样式’

    一般用于定义一些全局的样式
    image.png
    @import url(“common/base.css”); 导入外部样式
    @import “common/base.css”; 也可以这样写
    image.png

    Flex 布局教程