微信小程序碎片笔记3

<view>
  rpx
</view>
/*
  1 小程序中 不需要主动引入样式文件
  2 需要把页面中的某些元素的单位 由 px 改成 rpx
    1 设计稿  750px
      750 px = 750 rpx
      1 px = q rpx
    2 把屏幕宽度 改成 375px
      375 px = 750 rpx
      1 px = 2 rpx
      1 rpx = 0.5 px
  3 存在一个设计稿 宽414 或者 位置page
    1 设计稿 page 存在一个元素 宽度 100px
    2 拿以上的需求 去实现 不同宽度的页面适配

    page px = 750 rpx
    1 px = 750 rpx / page
    100 px = 750  rpx * 100 / page
  4 利用 一个属性 calc属性 css和xmss都支持 一个属性
    1 750 px 个 rpx 中间不要留空格
    2 运算符的两边必须留空格
*/

view{
  /* width: 200px; */
  height: 200px;
  font-size: 40px;
  background-color: cadetblue;
  /* 以下单吗写法是错误的 */
  /* width:750 rpx * 100 / 375; */
  width:calc(750rpx * 100 / 375);
}

 

上一篇:微信小程序开发(3)样式WXSS


下一篇:vue中rem适配方案