微信小程序尺寸单位及其组件说明

1.WXSS

WXSS(Weixin Style Sheets)，是一套样式语言，用于描述WXML的组件样式。
WXSS具备CSS的大部分特性，但其进行扩展：
· 尺寸单位
· 样式导入

1.1 尺寸单位

rpx(Response Pixel)，响应式像素，可以根据屏幕宽度进行自适应，规定屏幕宽度为750rpx。

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

1.2 样式导入

样式导入的语句是：
@import “wxss文件的路径及名称”;

2.组件

· 关于组件(属性)的说明
A.组件属性既可以采用短横线分隔也可以采用驼峰标记法
B.针对布尔属性时，无论其值书写为任何结果都认为是true，除非该属性不存在(如果在进行双向数据绑定时，则需要true或 false)
C.小程序组件严格遵守XML语法结构，单标记必须以 /> 结尾

1. <view>组件

<view>组件是视图容器组件，其语法结构是：

<view
  hover-class="按下去的样式类名称"
  hover-start-time="按住后多久出现点击态(毫秒)"
  hover-stay-time="点击态保留时间(毫秒)"
  hover-stop-propagation="是否阻止冒泡">
  ...  
</view>

2. <image>组件

<image>组件为图片组件，支持GIF、JPG、PNG、SVG、WEBP格式的图片，语法结构是：

<image 
	src="图片的URL地址" 
    lazy-load="是否采用懒加载"
    show-menu-by-longpress="是否开启长按显示识别小程序码的菜单">
</image>

webp图像格式是Google推荐使用的一种图像格式， 其体积约为JPG文件的2/3