纯CSS3使用vw和vh视口单位实现自适应-sass基础-

transition transform 0.5s

transition主要包含四个属性值

• 执行变换的属性：transition-property
• 变换延续的时间：transition-duration
• 在延续时间段，
• 变换的速率变化transition-timing-function
• 变换延迟时间transition-delay。

	<style lang="stylus" scoped>
			.imgitem
	                position static
	                width 100%
	                height 100%
	                transition transform 0.5s
	</style>
			

css3 transform

旋转、缩放、移动或倾斜
scaleX(1.1) 通过设置 X 轴的值来定义缩放转换。
scaleY(0.5) 通过设置 Y 轴的值来定义缩放转换。

视口自适应

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域
而在移动端较为复杂，它涉及到三个视口
分别是 Layout Viewport（布局视口）、 Visual Viewport（视觉视口）、Ideal Viewport。

<style lang="scss" scoped>

  //纯CSS3使用vw和vh视口单位实现自适应
  // rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
  $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
  @function rem($px) {
   
    @return ($px / $vm_fontsize ) * 1rem;
  }
  // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
  body