WEB端、WebApp、LED大屏等 H5页面基于缩放实现页面自适应

1、CSS3 transform 属性（http://www.w3school.com.cn/cssref/pr_transform.asp）

 

• transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

  我们实现大屏自适应使用了transform的缩放功能

   

•    transform相关语法

  transform: none|transform-functions;

  <

  值	描述	测试
  none	定义不进行转换。	测试
  matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。	测试
  matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
  translate(x,y)	定义 2D 转换。	测试
  translate3d(x,y,z)	定义 3D 转换。
  translateX(x)	定义转换，只是用 X 轴的值。	测试
  translateY(y)	定义转换，只是用 Y 轴的值。	测试
  translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
  scale(x,y)	定义 2D 缩放转换。	测试
  scale3d(x,y,z)	定义 3D 缩放转换。
  scaleX(x)	通过设置 X 轴的值来定义缩放转换。	测试
  scaleY(y)	通过设置 Y 轴的值来定义缩放转换。